.relay { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 44px; align-items: center; margin-top: 56px; }
.relay:not(.is-live) { grid-template-columns: 1fr; max-width: 760px; }
.relay:not(.is-live) .relay-stage { display: none; }
.relay-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: none; }
.relay-steps li { border-radius: var(--r); transition: background .3s ease; }
.relay-steps button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: var(--ink2); text-align: left; cursor: pointer; border-radius: var(--r); }
.relay-steps .n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font); border: var(--bw) solid var(--line); color: var(--ink3); background: var(--card); transition: background .3s, color .3s, border-color .3s; }
.relay-steps .nm { display: grid; gap: 1px; }
.relay-steps .nm b { font: 700 17px/1.25 var(--display); color: var(--ink); letter-spacing: -.01em; }
.relay-steps .nm span { font-size: 13px; color: var(--ink3); }
.relay-steps .term { margin: 0 14px 12px 58px; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.relay.is-live .relay-steps li:not(.is-on) .term { display: none; }
.relay-steps li.is-on { background: var(--card); box-shadow: var(--shadow); }
.relay-steps li.is-on .n { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
.relay-steps li.is-done .n { color: var(--acc); border-color: var(--acc); }
:root[data-skin="zendesk"] .relay-steps li.is-done .n { color: var(--ink); border-color: var(--ink); }
:root[data-skin="punk"] .relay-steps li.is-on { border: 3px solid #0a0a0a; box-shadow: 5px 5px 0 #0a0a0a; }
.relay-steps button:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.relay-steps .bar { display: block; height: 2px; width: 0; background: var(--acc); margin: -2px 14px 0; border-radius: 2px; }
.relay-stage { min-width: 0; }
.relay-stage .frame .fbar b { gap: 7px; }
.rl-host { min-height: 460px; display: flex; flex-direction: column; }
.rl-host > .rl { flex: 1 0 auto; }
.rl-probe { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none; }
.relay-cap { display: none; margin: 16px 4px 0; font-size: 15px; line-height: 1.45; color: var(--ink2); text-align: center; min-height: 3em; }


.paint button { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid transparent; background-clip: padding-box; cursor: pointer; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.paint button.is-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.paint button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.paint .lbl { font: 600 11px/1 var(--font); font-style: normal; color: var(--ink3); margin-right: 2px; }
.paint [data-paint="nodpage"] { background: #0000ff; } .paint [data-paint="notion"] { background: #191919; }
.paint [data-paint="trello"] { background: #0c66e4; } .paint [data-paint="clickup"] { background: linear-gradient(135deg, #7b68ee, #fd71af); }
.paint [data-paint="salesforce"] { background: #0176d3; } .paint [data-paint="zendesk"] { background: #03363d; }
.paint [data-paint="punk"] { background: #ff2d95; }


.baton-ghost { position: fixed; z-index: 25; margin: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--acc); color: var(--acc-fg); font: 700 13px/1 var(--font); white-space: nowrap; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
:root[data-skin="punk"] .baton-ghost { border-radius: 0; border: 3px solid #0a0a0a; box-shadow: 5px 5px 0 #0a0a0a; }
.rl .r-baton.is-caught { animation: rl-caught 1.1s ease-out; }
@keyframes rl-caught { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }


.rl { font: 400 13px/1.45 var(--font); color: var(--ink); background: var(--card); height: 460px; display: flex; flex-direction: column; text-align: left; overflow: hidden; }
.rl, .rl * { box-sizing: border-box; }
.rl svg { width: 15px; height: 15px; flex: none; }
.rl h4, .rl p, .rl dl, .rl dd, .rl ol, .rl ul, .rl figure { margin: 0; padding: 0; }
.rl h4 { font: 700 11px/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: center; gap: 6px; }
.rl h4 span { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.rl code { font: 500 11px/1.3 ui-monospace, Menlo, monospace; }
.rl kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink3); background: var(--bg); }
.rl .r-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; min-height: 50px; border-bottom: var(--bw) solid var(--line); flex: none; }
.rl .r-crumb { display: flex; align-items: center; gap: 8px; color: var(--ink3); font-size: 12px; white-space: nowrap; min-width: 0; }
.rl .r-crumb i { font-style: normal; opacity: .6; }
.rl .r-crumb b { color: var(--ink); font-weight: 700; }
.rl .r-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rl .r-tabs { display: flex; gap: 2px; }
.rl .r-tabs span { padding: 6px 10px; border-radius: var(--btn-r); color: var(--ink3); font-weight: 600; font-size: 12px; white-space: nowrap; }
.rl .r-tabs .is-on { background: var(--soft); color: var(--acc); }
:root[data-skin="zendesk"] .rl .r-tabs .is-on, :root[data-skin="punk"] .rl .r-tabs .is-on { color: var(--ink); }
.rl .r-body { flex: 1; min-height: 0; display: grid; gap: 16px; padding: 16px 18px; }
.rl .r-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--acc); }
:root[data-skin="zendesk"] .rl .r-eyebrow, :root[data-skin="punk"] .rl .r-eyebrow { color: var(--ink); }
.rl .r-side-title { display: block; font: 700 17px/1.25 var(--display); letter-spacing: -.01em; margin: 8px 0 6px; }
.rl .r-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font); background: var(--soft); color: var(--acc); }
.rl .r-baton { position: relative; box-shadow: 0 0 0 2px var(--acc); }
:root[data-skin="punk"] .rl .r-baton { box-shadow: 4px 4px 0 #ff2d95; outline: 3px solid #0a0a0a; }
.rl .r-card, .rl .r-issue, .rl .r-deal { background: var(--bg); border: var(--bw) solid var(--line); border-radius: calc(var(--r) - 4px); padding: 10px 11px; }
:root[data-skin="punk"] .rl .r-card, :root[data-skin="punk"] .rl .r-issue, :root[data-skin="punk"] .rl .r-deal { background: #fff; }


.rl-product .r-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.rl-product .r-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.rl-product .r-lane { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: calc(var(--r) - 2px); background: var(--bg2); }
.rl-product .r-card { display: grid; gap: 8px; background: var(--card); }
.rl-product .r-card b { font-size: 13px; line-height: 1.3; }
.rl-product .r-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rl-product .r-score { font: 700 11px/1 var(--font); padding: 4px 7px; border-radius: 999px; background: var(--soft); color: var(--acc); }
:root[data-skin="zendesk"] .rl-product .r-score, :root[data-skin="punk"] .rl-product .r-score { color: var(--ink); }
.rl-product .r-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink3); }
.rl-product .r-note svg { width: 12px; height: 12px; }
.rl-product .r-side { border-left: var(--bw) solid var(--line); padding-left: 16px; display: flex; flex-direction: column; min-width: 0; }
.rl-product .r-quote { font-size: 13px; color: var(--ink2); padding: 8px 10px; border-radius: calc(var(--r) - 6px); background: var(--bg); }
.rl-product .r-rice { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.rl-product .r-rice span { display: grid; gap: 2px; font: 700 15px/1.1 var(--font); text-align: center; padding: 7px 2px; border-radius: calc(var(--r) - 6px); background: var(--bg); }
.rl-product .r-rice i { font: 500 9px/1.1 var(--font); color: var(--ink3); font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.rl-product .r-rice .r-total { background: var(--acc); color: var(--acc-fg); }
.rl-product .r-rice .r-total i { color: inherit; opacity: .8; }
.rl-product .r-kpis { display: grid; gap: 8px; margin-top: auto; }
.rl-product .r-kpi { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: var(--bw) solid var(--line); border-radius: calc(var(--r) - 6px); font-size: 12px; color: var(--ink3); }
.rl-product .r-kpi svg { color: var(--acc); width: 18px; height: 18px; }
.rl-product .r-kpi b { font: 800 18px/1 var(--display); color: var(--ink); margin-right: 8px; }


.rl-dev .r-query { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--btn-r); border: 1px solid var(--line); background: var(--bg); color: var(--ink2); min-width: 0; overflow: hidden; }
.rl-dev .r-query code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-dev .r-left { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink3); white-space: nowrap; }
.rl-dev .r-board { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 10px; }
.rl-dev .r-col { align-self: start; }
.rl-dev .r-prbox { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: calc(var(--r) - 4px); background: var(--bg); }
.rl-dev .r-prhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rl-dev .r-prhead svg { color: var(--acc); }
.rl-dev .r-prhead code { color: var(--ink3); }
.rl-dev .r-prstat { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink2); }
.rl-dev .r-okline { display: inline-flex; align-items: center; gap: 5px; color: #2f9e61; font-weight: 600; }
.rl-dev .r-okline svg { width: 13px; height: 13px; stroke-width: 2.6; }
.rl-dev .r-diff b { color: #2f9e61; } .rl-dev .r-diff i { color: #d9534f; font-style: normal; font-weight: 700; }
.rl-dev .r-commits { list-style: none; display: grid; gap: 3px; font-size: 12px; color: var(--ink2); }
.rl-dev .r-commits code { color: var(--acc); margin-right: 8px; }
.rl-dev .r-col { display: grid; gap: 8px; align-content: start; }
.rl-dev .r-col h4 { padding: 2px 2px 4px; }
.rl-dev .r-col h4 i { width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.rl-dev .r-issue { display: grid; gap: 7px; background: var(--card); }
.rl-dev .r-id { font: 600 11px/1 ui-monospace, Menlo, monospace; color: var(--ink3); }
.rl-dev .r-issue b { font-size: 13px; line-height: 1.3; }
.rl-dev .r-branch { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--ink2); }
.rl-dev .r-branch svg { width: 13px; height: 13px; color: var(--ink3); }
.rl-dev .r-pr { font: 600 11px/1 var(--font); color: var(--ink3); }
.rl-dev .r-ci { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #2f9e61; color: #fff; }
.rl-dev .r-ci svg { width: 11px; height: 11px; stroke-width: 3; }
.rl-dev .r-foot { display: flex; align-items: center; justify-content: space-between; }
.rl-dev .r-pts { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 11px/1 var(--font); background: var(--bg2); color: var(--ink2); }


.rl-design .r-zoom { font: 600 12px/1 var(--font); color: var(--ink3); padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--btn-r); }
.rl-design .r-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--bg2); }
.rl-design .r-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.rl-design .r-thumb { display: grid; gap: 6px; }
.rl-design .r-thumb .r-art { aspect-ratio: 4 / 3; border-radius: calc(var(--r) - 6px); border: var(--bw) solid var(--line); }
.rl-design .r-thumb.is-sel .r-art { box-shadow: 0 0 0 2px var(--acc); }
.rl-design .r-thumb figcaption { font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-design .r-view { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rl-design .r-big { border-radius: calc(var(--r) - 4px); }
.rl-design .r-big .r-art { aspect-ratio: 16 / 10; border-radius: calc(var(--r) - 4px); }
.rl-design .r-pin { position: absolute; left: 62%; top: 20%; width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; background: var(--acc2); color: #0a0a0a; display: grid; place-items: center; font: 700 11px/1 var(--font); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.rl-design .r-bubble { position: absolute; left: calc(62% + 32px); top: 14%; right: 6px; display: grid; gap: 2px; padding: 7px 9px; border-radius: 8px; background: var(--card); color: var(--ink); font-size: 11px; line-height: 1.3; box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.rl-design .r-bubble b { font-size: 11px; }
.rl-design .r-versions { display: flex; gap: 8px; }
.rl-design .r-versions span { display: grid; gap: 4px; justify-items: center; font: 600 11px/1 var(--font); color: var(--ink3); }
.rl-design .r-versions .r-art { width: 52px; aspect-ratio: 4 / 3; border-radius: 5px; border: 1px solid var(--line); }
.rl-design .r-versions .is-on { color: var(--acc); }
.rl-design .r-versions .is-on .r-art { box-shadow: 0 0 0 2px var(--acc); }
.rl-design .r-tokens { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; font-size: 11px; color: var(--ink2); }
.rl-design .r-tokens span { display: inline-flex; align-items: center; gap: 5px; }
.rl-design .r-tokens i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); }
.rl-design .r-tokens code { color: var(--ink3); }
.rl-design .r-type { font-weight: 800; }

.rl .r-art { position: relative; display: block; overflow: hidden; background: #f5f0e7; }
.rl .r-art i { position: absolute; display: block; }
.rl .r-art-cover i:nth-child(1) { left: 10%; top: 16%; width: 24%; height: 9%; background: #0000ff; border-radius: 2px; }
.rl .r-art-cover i:nth-child(2) { left: 10%; top: 38%; width: 58%; height: 11%; background: #20242c; border-radius: 2px; box-shadow: 0 170% 0 -1px #20242c; }
.rl .r-art-cover i:nth-child(3) { right: 8%; bottom: 10%; width: 30%; aspect-ratio: 1; background: #ee8f76; border-radius: 50%; }
.rl .r-art-cover.r-v1 i:nth-child(3) { background: #f1d27a; border-radius: 6px; }
.rl .r-art-cover.r-v2 i:nth-child(1) { width: 18%; }
.rl .r-art-cover.r-v3 i:nth-child(1) { width: 36%; height: 13%; }
.rl .r-art-hero { background: #fff; }
.rl .r-art-hero i:nth-child(1) { left: 8%; top: 10%; right: 8%; height: 8%; background: #e8e3da; }
.rl .r-art-hero i:nth-child(2) { left: 18%; top: 34%; right: 18%; height: 14%; background: #20242c; border-radius: 2px; }
.rl .r-art-hero i:nth-child(3) { left: 36%; top: 60%; right: 36%; height: 12%; background: #0000ff; border-radius: 99px; }
.rl .r-art-banner { background: #0000ff; }
.rl .r-art-banner i:nth-child(1) { left: 10%; top: 22%; width: 50%; height: 12%; background: #fff; }
.rl .r-art-banner i:nth-child(2) { left: 10%; top: 42%; width: 34%; height: 8%; background: rgba(255, 255, 255, .6); }
.rl .r-art-banner i:nth-child(3) { right: -10%; bottom: -20%; width: 50%; aspect-ratio: 1; background: #ee8f76; border-radius: 50%; }
.rl .r-art-social { background: #ee8f76; }
.rl .r-art-social i:nth-child(1) { left: 20%; top: 20%; width: 60%; height: 60%; background: #f5f0e7; border-radius: 50%; }
.rl .r-art-social i:nth-child(2) { left: 38%; top: 38%; width: 24%; height: 24%; background: #0000ff; border-radius: 3px; }
.rl .r-art-social i:nth-child(3) { display: none; }


.rl-sales .r-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: var(--btn-r); border: 1px solid var(--line); font-size: 12px; color: var(--ink2); white-space: nowrap; }
.rl-sales .r-forecast { font-size: 12px; color: var(--ink3); white-space: nowrap; }
.rl-sales .r-forecast b { color: var(--ink); }
.rl-sales .r-body { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.rl-sales .r-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start; }
.rl-sales .r-stage { display: grid; gap: 7px; align-content: start; }
.rl-sales .r-stage h4 { min-width: 0; overflow: hidden; display: grid; gap: 3px; padding: 8px 8px 9px; border-radius: 6px; background: var(--bg2); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.rl-sales .r-stage h4 span { margin: 0; font-size: 11px; color: var(--ink2); }
.rl-sales .r-deal { display: grid; gap: 3px; background: var(--card); }
.rl-sales .r-deal b { font-size: 12px; line-height: 1.25; }
.rl-sales .r-deal span { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rl-sales .r-deal.is-sel { border-color: var(--acc); background: var(--soft); }
.rl-sales .r-dealcard { border-left: var(--bw) solid var(--line); padding-left: 16px; min-width: 0; display: flex; flex-direction: column; }
.rl-sales .r-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 800 20px/1.1 var(--display); }
.rl-sales .r-amount i { font: 500 12px/1 var(--font); color: var(--ink3); font-style: normal; }
.rl-sales .r-feed { list-style: none; display: grid; gap: 6px; margin-top: 14px; }
.rl-sales .r-feed li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 8px; border-radius: calc(var(--r) - 6px); font-size: 12px; line-height: 1.35; }
.rl-sales .r-feed li svg { margin-top: 1px; color: var(--ink3); }
.rl-sales .r-feed li span { display: grid; gap: 2px; }
.rl-sales .r-feed li i { font-style: normal; font-size: 11px; color: var(--ink3); }
.rl-sales .r-feed li.is-late i { color: #d9534f; font-weight: 700; }
.rl-sales .r-feed li.r-baton { background: var(--soft); }
.rl-sales .r-feed li.r-baton svg { color: var(--acc); }


.rl-kb .r-find { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 330px; padding: 7px 10px; border-radius: var(--btn-r); border: 1px solid var(--line); background: var(--bg); color: var(--ink3); font-size: 12px; }
.rl-kb .r-find kbd { margin-left: auto; }
.rl-kb .r-body { grid-template-columns: 200px minmax(0, 1fr); gap: 0; padding: 0; }
.rl-kb .r-tree { list-style: none; padding: 12px 8px; border-right: var(--bw) solid var(--line); background: var(--bg2); display: grid; gap: 1px; align-content: start; }
.rl-kb .r-tree li { display: flex; align-items: center; gap: 5px; padding: 5px 6px 5px calc(6px + var(--l) * 14px); border-radius: 6px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.rl-kb .r-tree li svg { width: 13px; height: 13px; color: var(--ink3); }
.rl-kb .r-tree li span { overflow: hidden; text-overflow: ellipsis; }
.rl-kb .r-tree li.is-sel { background: var(--soft); color: var(--ink); font-weight: 600; }
.rl-kb .r-page { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rl-kb .r-page-head { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: calc(var(--r) - 6px); }
.rl-kb .r-page-head svg { width: 20px; height: 20px; color: var(--acc); }
.rl-kb .r-page-head b { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.rl-kb .r-props { display: grid; gap: 4px; }
.rl-kb .r-props div { display: grid; grid-template-columns: 90px 1fr; font-size: 12px; }
.rl-kb .r-props dt { color: var(--ink3); }
.rl-kb .r-text { font-size: 13px; color: var(--ink2); max-width: 52ch; }
.rl-kb .r-links { display: grid; gap: 6px; margin-top: auto; }
.rl-kb .r-lk { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: calc(var(--r) - 6px); border: 1px solid var(--line); font-size: 12px; min-width: 0; }
.rl-kb .r-lk i { flex: none; font: 700 10px/1 var(--font); font-style: normal; letter-spacing: .03em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; color: #fff; }
.rl-kb .r-lk-product i { background: #3b6cf6; } .rl-kb .r-lk-dev i { background: #2f9e61; }
.rl-kb .r-lk-design i { background: #e8912d; } .rl-kb .r-lk-sales i { background: #8a5cf6; }


.rl-all { justify-content: center; align-items: center; gap: 18px; padding: 26px 22px; background: var(--bg2); }
.rl-all .r-chain { display: flex; align-items: stretch; gap: 6px; width: 100%; }
.rl-all .r-link { flex: 1; min-width: 0; display: grid; gap: 5px; align-content: start; justify-items: start; padding: 14px 12px; border-radius: calc(var(--r) - 2px); border: var(--bw) solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.rl-all .r-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rl-all .r-link:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.rl-all .r-glyph { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--acc); margin-bottom: 4px; }
:root[data-skin="punk"] .rl-all .r-glyph { border-radius: 0; border: 2px solid #0a0a0a; background: #fff200; color: #0a0a0a; }
.rl-all .r-glyph svg { width: 17px; height: 17px; }
.rl-all .r-link i { font: 600 11px/1 var(--font); font-style: normal; color: var(--ink3); letter-spacing: .03em; text-transform: uppercase; }
.rl-all .r-link b { font: 700 14px/1.25 var(--display); }
.rl-all .r-link span:last-child { font-size: 11px; color: var(--ink2); line-height: 1.3; overflow-wrap: anywhere; }
.rl-all .r-arr { align-self: center; color: var(--ink3); }
.rl-all .r-arr svg { width: 14px; height: 14px; }
.rl-all .r-sign { font: 700 40px/1 nodpageHand, cursive; color: var(--acc); padding: 4px 14px; border-radius: 12px; transform: rotate(-3deg); }
:root[data-skin="zendesk"] .rl-all .r-sign { color: var(--ink); }
.rl-all .r-sign.r-baton { box-shadow: none; outline: 0; }
.rl-all .r-sign.is-caught { animation: rl-stamp .6s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes rl-stamp { 0% { transform: rotate(-3deg) scale(1.18); opacity: .4; } 100% { transform: rotate(-3deg) scale(1); opacity: 1; } }
.rl-all .r-under { font-size: 13px; color: var(--ink2); }


@container nv (max-width: 800px) {
  .rl-sales .r-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rl-sales .r-stage:nth-child(1) { display: none; }
  .rl-product .r-lanes { gap: 8px; }
  .rl-product .r-lane { padding: 8px; }
}
@container nv (max-width: 640px) {
  .rl { height: auto; min-height: 460px; }
  .rl .r-top { flex-wrap: wrap; padding: 10px 14px; }
  .rl .r-body { padding: 14px; }
  .rl-product .r-body, .rl-sales .r-body, .rl-design .r-body { grid-template-columns: 1fr; }
  .rl-product .r-side, .rl-sales .r-dealcard { border-left: 0; padding-left: 0; border-top: var(--bw) solid var(--line); padding-top: 14px; }
  .rl-product .r-lane:nth-child(3) { display: none; }
  .rl-product .r-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-product .r-kpis { margin-top: 12px; }
  .rl-dev .r-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-dev .r-query { display: none; }
  .rl-dev .r-board { grid-template-rows: auto; }
  .rl-dev .r-commits { display: none; }
  .rl-sales .r-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-sales .r-stage:nth-child(1), .rl-sales .r-stage:nth-child(2) { display: none; }
  .rl-design .r-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rl-kb .r-body { grid-template-columns: 1fr; }
  .rl-kb .r-tree { border-right: 0; border-bottom: var(--bw) solid var(--line); }
  .rl-kb .r-tree li:nth-child(n+7) { display: none; }
  .rl-kb .r-tools { display: none; }
  .rl-all .r-chain { flex-direction: column; }
  .rl-all .r-arr { transform: rotate(90deg); }
  .rl-all .r-link { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .rl-all .r-glyph { grid-row: span 3; margin: 0; }
}
@container nv (max-width: 440px) {
  .rl-dev .r-col:nth-child(1), .rl-dev .r-col:nth-child(4) { display: none; }
  .rl-dev .r-prbox { grid-column: 1 / -1; }
  .rl-dev .r-left { display: none; }
  .rl-design .r-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rl-design .r-thumb:nth-child(n+4) { display: none; }
  .rl-sales .r-forecast { display: none; }
  .rl-product .r-rice span { font-size: 13px; }
}


@media (max-width: 1180px) { .relay { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; } }
@media (max-width: 1000px) {
  .relay { grid-template-columns: 1fr; gap: 18px; }
  .relay-steps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 4px 12px 8px; }
  .relay-steps::-webkit-scrollbar { display: none; }
  .relay-steps li { flex: none; position: relative; }
  .relay-steps button { padding: 8px 12px 8px 8px; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
  .relay-steps .n { width: 24px; height: 24px; font-size: 12px; }
  .relay-steps .nm span { display: none; }
  .relay-steps .nm b { font-size: 14px; }
  .relay.is-live .relay-steps .term { display: none; }
  .relay-steps li.is-on { background: none; box-shadow: none; }
  .relay-steps li.is-on button { border-color: var(--acc); box-shadow: 0 0 0 3px var(--soft); }
  .relay-steps .bar { position: absolute; left: 18px; right: 18px; bottom: 6px; margin: 0; }
  :root[data-skin="punk"] .relay-steps li.is-on { border: 0; box-shadow: none; }
  :root[data-skin="punk"] .relay-steps button { border-radius: 0; border: 3px solid #0a0a0a; }
  .relay.is-live .relay-cap { display: block; }
}
@media (max-width: 768px) {
  .relay-stage .frame .fbar #relay-url { display: none; }
  .relay-stage .frame .fbar b { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .rl .r-baton.is-caught, .rl-all .r-sign.is-caught { animation: none; }
  .rl-all .r-link { transition: none; }
}