.tn-p .tn {
	font-size: 14px;
	line-height: 1.2857742857;
	font-weight: 400;
	letter-spacing: -0.016em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	--tn-line-height: 18px;
	--tn-height: 44px;
	--tn-scale: 1;
	--tn-inner-height: 36px;
	--tn-platter-padding: 4px;
	--tn-platter-background: rgb(232, 232, 237);
	--tn-platter-blur: 20px;
	--tn-mask-gradient-width: 22px;
	--tn-mask-opaque-width: calc(var(--tn-paddle-width) - var(--tn-platter-padding));
	--tn-mask-offset: calc(var(--tn-mask-opaque-width) + var(--tn-mask-gradient-width));
	--tn-mask-color-left: transparent;
	--tn-mask-color-right: transparent;
	--tn-mask-gradient: linear-gradient(
		to right,
		var(--tn-mask-color-left) 0,
		var(--tn-mask-color-left) var(--tn-mask-opaque-width),
		black calc(var(--tn-mask-opaque-width) + var(--tn-mask-gradient-width)),
		black calc(100% - (var(--tn-mask-opaque-width) + var(--tn-mask-gradient-width))),
		var(--tn-mask-color-right) calc(100% - var(--tn-mask-opaque-width)),
		var(--tn-mask-color-right) 100%
	);
	--tn-items-offset: 0px;
	--tn-item-padding: 16px;
	--tn-item-color: rgb(0, 0, 0);
	--tn-item-color-active: rgb(255, 255, 255);
	--tn-paddle-width: calc(var(--tn-inner-height) + var(--tn-platter-padding));
	--tn-paddle-height: var(--tn-inner-height);
	--tn-paddle-color: rgba(0, 0, 0, 0.56);
	--tn-paddle-color-hover: rgba(0, 0, 0, 0.64);
	--tn-indicator-background: rgb(29, 29, 31);
	--tn-indicator-start: var(--tn-platter-padding);
	--tn-indicator-width: 0px;
	--tn-focus-color: var(--sk-focus-color, #0071e3);
	--tn-motion-scroll-duration: 320ms;
	--tn-motion-indicator-transform-duration: 320ms;
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
}
.tn-p .tn:lang(ar) {
	letter-spacing: 0em;
	font-family: "SF Pro AR", "SF Pro AR Text", "SF Pro Text", "SF Pro Gulf", "SF Pro Icons",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn:lang(ja) {
	line-height: 1.3571828571;
	letter-spacing: 0em;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn:lang(ko) {
	line-height: 1.4285914286;
	letter-spacing: 0em;
	font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim",
		"MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn:lang(zh) {
	line-height: 1.3571828571;
	letter-spacing: 0em;
}
.tn-p .tn:lang(th) {
	line-height: 1.3571828571;
	letter-spacing: 0em;
	font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial",
		sans-serif;
}
.tn-p .tn:lang(zh-CN) {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn:lang(zh-HK) {
	font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn:lang(zh-MO) {
	font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn:lang(zh-TW) {
	font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn:lang(ja) {
	--tn-line-height: 19px;
}
.tn-p .tn:lang(ko) {
	--tn-line-height: 20px;
}
.tn-p .tn:lang(zh) {
	--tn-line-height: 19px;
}
.tn-p .tn:lang(th) {
	--tn-line-height: 19px;
}
@property --tn-mask-color-left {
	.tn-p {
		syntax: "<color>";
		inherits: true;
		initial-value: rgba(0, 0, 0, 0);
	}
}
@property --tn-mask-color-right {
	.tn-p {
		syntax: "<color>";
		inherits: true;
		initial-value: rgba(0, 0, 0, 0);
	}
}
.tn-p .tn-alpha {
	--tn-platter-background: rgba(210, 210, 215, 0.64);
}
.theme-dark .tn-p .tn,
.tn-p .tn.tn-dark {
	--tn-platter-background: rgb(51, 51, 54);
	--tn-item-color: rgb(255, 255, 255);
	--tn-item-color-active: rgb(0, 0, 0);
	--tn-paddle-color: rgba(255, 255, 255, 0.8);
	--tn-paddle-color-hover: rgb(255, 255, 255);
	--tn-indicator-background: rgb(245, 245, 247);
	--tn-focus-color: rgb(255, 255, 255);
}
.theme-dark .tn-p .tn-alpha,
.tn-p .tn.tn-dark-alpha {
	--tn-platter-background: rgba(66, 66, 69, 0.72);
}
.theme-dark .tn-p .tn.tn-light {
	--tn-platter-background: rgb(232, 232, 237);
	--tn-item-color: rgb(0, 0, 0);
	--tn-item-color-active: rgb(255, 255, 255);
	--tn-paddle-color: rgba(0, 0, 0, 0.56);
	--tn-paddle-color-hover: rgba(0, 0, 0, 0.64);
	--tn-indicator-background: rgb(29, 29, 31);
}
.theme-dark .tn-p .tn.tn-light-alpha {
	--tn-platter-background: rgba(210, 210, 215, 0.64);
}
.tn-p .tn:has(.tn-paddle-left.tn-paddle-hidden) {
	--tn-mask-color-left: black;
}
.tn-p .tn:has(.tn-paddle-right.tn-paddle-hidden) {
	--tn-mask-color-right: black;
}
.tn-p .tn:not(.tn.tn-disable-transitions) {
	transition-property: --tn-mask-color-left, --tn-mask-color-right;
	transition-duration: 40ms;
	transition-delay: 0ms, 0ms;
}
.tn-p .tn:not(.tn.tn-disable-transitions):has(.tn-paddle-left.tn-paddle-hidden) {
	transition-delay: 280ms, 0ms;
}
.tn-p .tn:not(.tn.tn-disable-transitions):has(.tn-paddle-right.tn-paddle-hidden) {
	transition-delay: 0ms, 280ms;
}
.tn-p
	.tn:not(.tn.tn-disable-transitions):has(
		.tn-paddle-left.tn-paddle-hidden + .tn-paddle-right.tn-paddle-hidden
	) {
	transition-delay: 280ms, 280ms;
}
.tn-p .tn.tn-with-2-lines {
	--tn-lines: 2;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line) {
	font-size: 10px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.006em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	--tn-line-height: 10px;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(ar) {
	letter-spacing: 0em;
	font-family: "SF Pro AR", "SF Pro AR Text", "SF Pro Text", "SF Pro Gulf", "SF Pro Icons",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(ja) {
	letter-spacing: 0em;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(ko) {
	letter-spacing: 0em;
	font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim",
		"MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(zh) {
	letter-spacing: 0em;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(th) {
	font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial",
		sans-serif;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(zh-CN) {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(zh-HK) {
	font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(zh-MO) {
	font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-with-2-lines:not(.tn-line):lang(zh-TW) {
	font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated {
	font-size: 17px;
	line-height: 1.2353641176;
	font-weight: 400;
	letter-spacing: -0.022em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	--tn-line-height: 21px;
	--tn-height: 56px;
	--tn-inner-height: 44px;
	--tn-platter-padding: 6px;
	--tn-item-padding: 22px;
}
.tn-p .tn.tn-elevated:lang(ar) {
	letter-spacing: 0em;
	font-family: "SF Pro AR", "SF Pro AR Text", "SF Pro Text", "SF Pro Gulf", "SF Pro Icons",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated:lang(ja) {
	letter-spacing: 0em;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated:lang(ko) {
	line-height: 1.3529611765;
	letter-spacing: 0em;
	font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim",
		"MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated:lang(zh) {
	line-height: 1.3529611765;
	letter-spacing: 0em;
}
.tn-p .tn.tn-elevated:lang(th) {
	line-height: 1.3529611765;
	letter-spacing: 0em;
	font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial",
		sans-serif;
}
.tn-p .tn.tn-elevated:lang(zh-CN) {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated:lang(zh-HK) {
	font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated:lang(zh-MO) {
	font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated:lang(zh-TW) {
	font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated:lang(ko) {
	--tn-line-height: 23px;
}
.tn-p .tn.tn-elevated:lang(zh) {
	--tn-line-height: 23px;
}
.tn-p .tn.tn-elevated:lang(th) {
	--tn-line-height: 23px;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line) {
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.01em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	--tn-line-height: 12px;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(ar) {
	letter-spacing: 0em;
	font-family: "SF Pro AR", "SF Pro AR Text", "SF Pro Text", "SF Pro Gulf", "SF Pro Icons",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(ja) {
	letter-spacing: 0em;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(ko) {
	letter-spacing: 0em;
	font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim",
		"MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(zh) {
	letter-spacing: 0em;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(th) {
	font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial",
		sans-serif;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(zh-CN) {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(zh-HK) {
	font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(zh-MO) {
	font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tn-p .tn.tn-elevated.tn-with-2-lines:not(.tn-line):lang(zh-TW) {
	font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}
.tn-p .tn:focus-within:has([data-focus-method="key"]) .tn-indicator {
	outline: 2px solid var(--sk-focus-color, #0071e3);
	outline-offset: 2px;
	outline-color: var(--tn-focus-color);
}
.tn-p .tn * {
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.tn-p .tn.tn-disable-transitions * {
	transition: none !important;
	animation: none !important;
}
.tn-p .tn-scale {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(0 0 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
	font-size: 1px;
	height: 1em;
}
.tn-p .tn-platter {
	height: calc(var(--tn-height) * var(--tn-scale));
	padding: var(--tn-platter-padding);
	background-color: var(--tn-platter-background);
	border-radius: 999px;
	overflow: hidden;
	-webkit-backdrop-filter: blur(var(--tn-platter-blur));
	backdrop-filter: blur(var(--tn-platter-blur));
}
.tn-p .tn-platter:focus-visible {
	outline: none;
}
.tn-p .tn.tn-noblur .tn-platter {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.tn-p .tn-mask {
	position: relative;
	height: 100%;
	z-index: 1;
	width: 100%;
	overflow-x: hidden;
	-webkit-mask-image: var(--tn-mask-gradient);
	mask-image: var(--tn-mask-gradient);
	overscroll-behavior: none;
}
.tn-p .tn-mask.tn-mask-noscroll {
	-webkit-mask-image: none;
	mask-image: none;
	display: contents;
	margin-inline-start: 0;
	padding: 0;
}
.tn-p .tn-items {
	display: flex;
	align-items: center;
	white-space: nowrap;
	position: relative;
	margin: 0;
	width: -moz-fit-content;
	width: fit-content;
	height: 100%;
	list-style: none;
	z-index: 1;
}
.tn-p .tn-item {
	position: relative;
	height: 100%;
	color: var(--tn-item-color);
	white-space: nowrap;
	transition-duration: 120ms;
	transition-property: color;
	transition-timing-function: ease-out;
}
.tn-p .tn-item .tn-link {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 var(--tn-item-padding);
	background: rgba(0, 0, 0, 0);
	border: none;
	color: inherit;
	text-decoration: none;
	letter-spacing: inherit;
	opacity: 0.8;
	transition-property: opacity;
	transition-duration: 100ms;
	transition-timing-function: ease-in-out;
	border-radius: 999px;
}
.tn-p .tn-item .tn-link:focus {
	outline: none;
}
.tn-p .tn-item .tn-link:hover {
	opacity: 1;
}
.tn-p .tn-item.tn-item-active {
	color: var(--tn-item-color-active);
	transition-delay: 160ms;
	transition-duration: 160ms;
	transition-timing-function: ease-in;
}
.tn-p .tn-item.tn-item-active .tn-link {
	opacity: 1;
	cursor: auto;
}
.tn-p .tn.tn-focus-split .tn-item-active .tn-link {
	background-color: var(--tn-indicator-background);
}
.tn-p .tn-paddle {
	position: absolute;
	display: block;
	transform: translateZ(0);
	top: var(--tn-platter-padding);
	bottom: var(--tn-platter-padding);
	width: var(--tn-paddle-width);
	min-height: var(--tn-paddle-height);
	background-color: rgba(0, 0, 0, 0);
	border: none;
	color: var(--tn-paddle-color);
	cursor: pointer;
	z-index: 2;
	transition-delay: 0ms, 40ms, 40ms;
	transition-duration: 100ms, 80ms, 80ms;
	transition-property: color, opacity, visibility;
	transition-timing-function: ease-in-out, ease-out, step-start;
}
.tn-p .tn-paddle-icon {
	position: absolute;
	translate: -50% 50%;
	bottom: 50%;
}
.tn-p .tn-paddle-left {
	left: 0;
}
.tn-p .tn-paddle-left .tn-paddle-icon {
	left: calc(50% - 2px + var(--tn-platter-padding));
}
.tn-p .tn-paddle-right {
	right: 0;
}
.tn-p .tn-paddle-right .tn-paddle-icon {
	left: calc(50% + 2px - var(--tn-platter-padding));
}
.tn-p .tn-paddle:hover {
	color: var(--tn-paddle-color-hover);
}
.tn-p .tn-paddle.tn-paddle-hidden {
	opacity: 0;
	visibility: hidden;
	transition-delay: 200ms;
	transition-duration: 80ms;
	transition-property: opacity, visibility;
	transition-timing-function: ease-out, step-end;
}
.tn-p .tn.tn-no-property .tn-paddle {
	transition: none !important;
}
.tn-p .tn-indicator {
	position: absolute;
	top: var(--tn-platter-padding);
	left: var(--tn-indicator-start);
	bottom: var(--tn-platter-padding);
	width: var(--tn-indicator-width);
	height: calc(100% - var(--tn-platter-padding) * 2);
	background-color: var(--tn-indicator-background);
	border-radius: 999px;
	transition-property: left, width;
	transition-duration: var(--tn-motion-indicator-transform-duration);
	transition-timing-function: ease-out;
	pointer-events: none;
}
.tn-p .tn.tn-focus-split .tn-indicator {
	display: none;
}
.tn-p .tn.tn-line {
	--tn-height: calc(
		var(--tn-image-height) + var(--tn-item-label-height) + var(--tn-line-keyline-height)
	);
	--tn-inner-height: calc(
		var(--tn-height) - var(--tn-line-keyline-height) - var(--tn-item-label-padding-block-end)
	);
	--tn-platter-padding: 0px;
	--tn-platter-background: rgba(210, 210, 215, 0.64);
	--tn-paddle-height: 100%;
	--tn-platter-blur: none;
	--tn-item-color: rgba(0, 0, 0, 0.8);
	--tn-item-color-active: rgb(0, 0, 0);
	--tn-paddle-width: 36px;
	--tn-paddle-height: 100%;
	--tn-indicator-background: rgb(0, 0, 0);
	--tn-mask-opaque-width: var(--tn-paddle-width);
	--tn-image-height: 0px;
	--tn-lines: 1;
	--tn-paddle-icon-bottom: calc(
		var(--tn-item-label-padding-block-end) + (var(--tn-line-height) / 2) +
			var(--tn-line-keyline-height)
	);
	--tn-line-keyline-height: 1px;
	--tn-item-label-height: calc(
		(var(--tn-line-height) * var(--tn-lines)) + var(--tn-item-label-padding-block-start) +
			var(--tn-item-label-padding-block-end)
	);
	--tn-item-label-padding-block-start: 8px;
	--tn-item-label-padding-block-end: calc(9px + var(--tn-line-keyline-height));
	--tn-indicator-inset: var(--tn-item-padding);
	--tn-link-justification: flex-end;
	--tn-link-content-height: auto;
	--tn-keyline-mask-opaque-width: 8px;
	--tn-keyline-mask-gradient-width: 18px;
	--tn-keyline-mask-gradient: linear-gradient(
		to right,
		var(--tn-mask-color-left) 0,
		var(--tn-mask-color-left) var(--tn-keyline-mask-opaque-width),
		black calc(var(--tn-keyline-mask-opaque-width) + var(--tn-keyline-mask-gradient-width)),
		black calc(100% - (var(--tn-keyline-mask-opaque-width) + var(--tn-keyline-mask-gradient-width))),
		var(--tn-mask-color-right) calc(100% - var(--tn-keyline-mask-opaque-width)),
		var(--tn-mask-color-right) 100%
	);
	--tn-item-focus-block-start: 0px;
	--tn-item-focus-block-end: var(--tn-item-label-padding-block-end);
	--tn-item-focus-block-start-padding: var(--tn-item-label-padding-block-start);
	--r-tn-focus-outline-offset: 1px;
}
.theme-dark .tn-p .tn.tn-line,
.tn-p .tn.tn-line.tn-dark {
	--tn-item-color: rgba(255, 255, 255, 0.8);
	--tn-item-color-active: rgb(255, 255, 255);
	--tn-indicator-background: rgb(255, 255, 255);
	--tn-platter-background: rgba(66, 66, 69, 0.72);
}
.tn-p .tn.tn-line.tn-elevated {
	--tn-item-label-padding-block-start: 11px;
	--tn-item-label-padding-block-end: calc(12px + var(--tn-line-keyline-height));
	--tn-paddle-width: 44px;
	--tn-keyline-mask-opaque-width: 12px;
	--tn-keyline-mask-gradient-width: 20px;
}
.tn-p .tn.tn-line.tn-elevated.tn-with-icons {
	--tn-item-label-padding-block-start: 6px;
}
.tn-p .tn.tn-line.tn-with-icons {
	--tn-image-height: 56px;
	--tn-paddle-icon-bottom: calc(
		(var(--tn-inner-height) / 2) + var(--tn-item-label-padding-block-end) +
			var(--tn-line-keyline-height)
	);
	--tn-link-justification: space-between;
	--tn-link-content-height: 100%;
	--r-tn-focus-outline-offset: 3px;
	--tn-item-label-padding-block-start: 4px;
	--tn-item-focus-block-start-padding: 0px;
}
.tn-p
	.tn.tn-line:focus-within:not(:has(.tn-paddle:focus)):not(
		:has([data-focus-method="mouse"], [data-focus-method="touch"])
	)
	.tn-indicator {
	outline: none;
}
.tn-p
	.tn.tn-line:focus-within:not(:has(.tn-paddle:focus)):not(
		:has([data-focus-method="mouse"], [data-focus-method="touch"])
	)
	.tn-indicator::after {
	outline: 2px solid var(--sk-focus-color, #0071e3);
	outline-offset: var(--sk-focus-offset, 1px);
	outline-offset: var(--r-tn-focus-outline-offset);
}
.tn-p .tn.tn-line:has(.tn-item-active.tn-item-first) {
	--tn-indicator-inset: 0px var(--tn-item-padding);
}
.tn-p .tn.tn-line:has(.tn-item-active.tn-item-last) {
	--tn-indicator-inset: var(--tn-item-padding) 0px;
}
.tn-p .tn.tn-line .tn-platter {
	background-color: rgba(0, 0, 0, 0);
	border-radius: 0;
	height: auto;
}
.tn-p .tn.tn-line .tn-keyline {
	height: var(--tn-line-keyline-height);
	width: 100%;
	overflow: hidden;
	position: absolute;
	z-index: 0;
	bottom: 0;
}
.tn-p .tn.tn-line .tn-keyline-mask {
	position: relative;
	height: 100%;
	z-index: 1;
	width: 100%;
	overflow-x: hidden;
	-webkit-mask-image: var(--tn-keyline-mask-gradient);
	mask-image: var(--tn-keyline-mask-gradient);
}
.tn-p .tn.tn-line .tn-keyline-mask::after {
	content: "";
	display: block;
	position: absolute;
	inset-block-start: 0;
	inset-block-end: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	border-radius: 999px;
	background-color: var(--tn-platter-background);
}
.tn-p .tn.tn-line .tn-mask.tn-mask-noscroll ~ .tn-keyline .tn-keyline-mask {
	-webkit-mask-image: none;
	mask-image: none;
	margin-inline-start: 0;
	padding: 0;
}
.tn-p .tn.tn-line .tn-items {
	align-items: stretch;
}
.tn-p .tn.tn-line .tn-item {
	margin-block: 0;
	height: auto;
}
.tn-p .tn.tn-line .tn-item:first-child .tn-link-content {
	margin-inline-start: 0;
}
.tn-p .tn.tn-line .tn-item:last-child .tn-link-content {
	margin-inline-end: 0;
}
.tn-p .tn.tn-line .tn-item:hover {
	color: var(--tn-item-color-active);
	transition-duration: 100ms;
	transition-timing-function: ease-in-out;
}
.tn-p .tn.tn-line .tn-item.tn-item-active {
	transition-delay: 0ms;
}
.tn-p .tn.tn-line .tn-link {
	flex-direction: column;
	justify-content: var(--tn-link-justification);
	opacity: 1;
	padding: 0;
}
.tn-p .tn.tn-line .tn-link-content {
	height: var(--tn-link-content-height);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: var(--tn-link-justification);
	margin-inline: var(--tn-item-padding);
	position: relative;
}
.tn-p .tn.tn-line .tn-link-content::after {
	content: "";
	height: var(--tn-line-keyline-height);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 999px;
}
.tn-p .tn.tn-line.tn-focus-split .tn-item-active .tn-link {
	background-color: rgba(0, 0, 0, 0);
}
.tn-p .tn.tn-line.tn-focus-split .tn-item-active .tn-link-content::after {
	background: var(--tn-indicator-background);
}
.tn-p .tn.tn-line .tn-label {
	display: block;
	padding-block-start: var(--tn-item-label-padding-block-start);
	padding-block-end: var(--tn-item-label-padding-block-end);
}
.tn-p .tn.tn-line .tn-icon {
	height: var(--tn-image-height);
}
.tn-p .tn.tn-line .tn-paddle {
	border-radius: 0;
}
.tn-p .tn.tn-line .tn-paddle-icon {
	bottom: var(--tn-paddle-icon-bottom);
}
.tn-p .tn.tn-line .tn-paddle-left .tn-paddle-icon {
	left: calc(50% - 2px);
}
.tn-p .tn.tn-line .tn-paddle-right .tn-paddle-icon {
	left: calc(50% + 2px);
}
.tn-p .tn.tn-line .tn-indicator {
	bottom: 0;
	top: auto;
	background: rgba(0, 0, 0, 0);
	outline: none;
}
.tn-p .tn.tn-line .tn-indicator::before {
	content: "";
	display: block;
	position: absolute;
	inset-block-start: auto;
	inset-block-end: 0;
	inset-inline: var(--tn-indicator-inset);
	height: var(--tn-line-keyline-height);
	z-index: 1;
	border-radius: 999px;
	background: var(--tn-indicator-background);
}
.tn-p .tn.tn-line .tn-indicator::after {
	content: "";
	position: absolute;
	display: block;
	transition-property: left, width;
	transition-duration: var(--tn-motion-indicator-transform-duration);
	transition-timing-function: ease-out;
	inset-inline: var(--tn-indicator-inset);
	inset-block-end: var(--tn-item-focus-block-end);
	inset-block-start: calc(
		var(--tn-item-focus-block-start-padding) + var(--tn-item-focus-block-start)
	);
	pointer-events: none;
}
.tn-p .tn.tn-line .tn-indicator.tn-hide-focus::after {
	display: none;
}