.tint{--tint: var(--brand-2, var(--signal));--tint-2: var(--signal);--tint-a: .1;--mx: 30%;--my: 0%;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,rgb(var(--tint) / calc(var(--tint-a) * .95)),rgb(var(--surface) / 0) 48%,rgb(var(--tint-2) / calc(var(--tint-a) * .45))),rgb(var(--surface));border:1px solid rgb(var(--tint) / .13);box-shadow:0 1px 2px #0e13300a,0 8px 24px -18px rgb(var(--tint) / .45)}.dark .tint{--tint-a: .16;border-color:rgb(var(--tint) / .16);box-shadow:0 1px 2px #0000004d}.tint:before,.tint:after{content:"";position:absolute;pointer-events:none;z-index:-1}.tint:before{width:70%;aspect-ratio:1;top:-35%;left:-20%;border-radius:9999px;background:radial-gradient(closest-side,rgb(var(--tint) / calc(var(--tint-a) * .6)),transparent);animation:tint-drift 14s ease-in-out infinite alternate}.tint:after{inset:0;opacity:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgb(var(--tint) / calc(var(--tint-a) * .9)),transparent 60%);transition:opacity .3s ease}.tint:hover:after{opacity:1}.tint-brand{--tint: var(--brand-2, var(--signal));--tint-2: var(--signal)}.tint-signal{--tint: var(--signal);--tint-2: var(--signal-2, var(--signal))}.tint-positive{--tint: var(--positive);--tint-2: var(--positive)}.tint-caution{--tint: var(--caution);--tint-2: var(--caution)}.tint-critical{--tint: var(--critical);--tint-2: var(--critical)}.tint-neutral{--tint: var(--ink-faint);--tint-2: var(--ink-faint);--tint-a: .07}.tint-icon{display:grid;place-items:center;flex-shrink:0;border-radius:.875rem;color:rgb(var(--tint, var(--brand)));background:rgb(var(--surface));box-shadow:0 1px 2px #0e13300f,0 4px 12px -6px rgb(var(--tint, var(--brand)) / .35);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.dark .tint-icon{background:rgb(var(--surface-2))}.tint:hover .tint-icon,.group:hover .tint-icon{transform:translateY(-1px) rotate(-6deg) scale(1.06)}.tint-pill{display:inline-grid;place-items:center;min-width:1.75rem;height:1.75rem;padding:0 .5rem;border-radius:9999px;font-size:.75rem;font-weight:700;color:rgb(var(--tint, var(--brand)));background:rgb(var(--surface) / .85);box-shadow:0 1px 2px #0e13300d}.dark .tint-pill{background:rgb(var(--surface-2) / .85)}.tint-text{color:rgb(var(--tint, var(--brand)))}.tint-hover{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.tint-hover:hover{transform:translateY(-3px);border-color:rgb(var(--tint, var(--brand)) / .3);box-shadow:0 2px 4px #0e13300a,0 18px 36px -20px rgb(var(--tint, var(--brand)) / .55)}.rise{animation:tint-rise .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i, 0) * 60ms)}.rise:nth-child(2){--i: 1}.rise:nth-child(3){--i: 2}.rise:nth-child(4){--i: 3}.rise:nth-child(5){--i: 4}.rise:nth-child(6){--i: 5}.rise:nth-child(7){--i: 6}.rise:nth-child(n+8){--i: 7}@keyframes tint-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.orb{animation:tint-orb 18s ease-in-out infinite alternate}.orb-late{animation-delay:-9s}@keyframes tint-orb{0%{transform:translate(0) scale(1)}50%{transform:translate(-6%,8%) scale(1.08)}to{transform:translate(5%,-4%) scale(.96)}}@keyframes tint-drift{0%{transform:translate(0) scale(1)}to{transform:translate(35%,25%) scale(1.25)}}.tint.toast{--tint-a: .13;background-color:rgb(var(--surface));box-shadow:0 2px 6px #0e13300f,0 24px 48px -16px rgb(var(--tint) / .4)}.dark .tint.toast{--tint-a: .2;box-shadow:0 24px 48px -16px #0009}.toast-in{animation:toast-in .45s cubic-bezier(.22,1,.36,1) both}.toast-out{animation:toast-out .28s ease-in both}.toast-timer{background:linear-gradient(90deg,rgb(var(--tint)),rgb(var(--tint-2)));animation-name:toast-timer;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(-18px) scale(.97)}to{opacity:1;transform:none}}@keyframes toast-out{to{opacity:0;transform:translateY(-12px) scale(.97)}}@keyframes toast-timer{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.tint:before{animation:none}.tint:after{display:none}.rise,.orb{animation:none}.toast-in{animation:tint-fade .2s both}.toast-out{animation:tint-fade .2s reverse both}.tint-hover,.tint-hover:hover,.tint-icon,.tint:hover .tint-icon,.group:hover .tint-icon{transform:none;transition:none}}@keyframes tint-fade{0%{opacity:0}to{opacity:1}}