:root{
  --burgundy: #5A0F2E; --burgundy-900: #410A20; --burgundy-700: #7E2347; --burgundy-600: #9C3D60; --burgundy-400: #D1849D;
  --burgundy-300: #E3ACBD; --burgundy-200: #F0CFD9; --blush: #F8E6EC; --blush-50: #FDF4F7;
  --cherry: #C8102E; --cherry-500: #E53E4A; --cherry-400: #F67173;
  --black: #000000; --white: #FFFFFF;
  --g50: #F6F6F8; --g100: #EBEBED; --g200: #D7D7DA; --g300: #BEBEC3; --g400: #A0A0A7; --g500: #84848C; --g600: #65656D;
  --graphite: #55555C; --g800: #404046; --g900: #2E2E31; --g950: #1B1B1D; --g975: #0F0F12;
  --green: #1F7A4C; --green-300: #AAD0B7; --amber: #B26A00; --amber-500: #C5833B; --amber-300: #E2BE9D;
  --f-display: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{ margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg{ max-width: 100%; }
a{ color: inherit; }
button{ font: inherit; }
.ico{ width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-split{ display: inline-block; white-space: nowrap; }
.w-mask{ display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .22em; margin: -.14em 0 -.22em; }
.w-in{ display: inline-block; will-change: transform; }
:focus-visible{ outline: 2px solid var(--burgundy-600); outline-offset: 3px; border-radius: 6px; }
.dev-phone{ --w: 300px; position: relative; width: var(--w); max-width: 100%; aspect-ratio: 300 / 620; flex: none; border-radius: calc(var(--w) * .155); background: var(--black); padding: calc(var(--w) * .033); font-size: calc(var(--w) / 30); box-shadow: inset 0 0 0 1px var(--g900), 0 50px 90px -40px rgba(42, 7, 20, .55); }
.dev-phone > .scr{ position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .125); background: var(--white); isolation: isolate; }
.dev-phone > .scr::before{ content: ""; position: absolute; z-index: 20; top: 1.1em; left: 50%; width: 9em; height: 2.6em; transform: translateX(-50%); border-radius: 99em; background: var(--black); }
.dev-browser{ --w: 760px; position: relative; width: var(--w); max-width: 100%; aspect-ratio: 760 / 480; flex: none; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.4em; background: var(--white); font-size: calc(var(--w) / 76); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 50px 100px -50px rgba(42, 7, 20, .5); }
.dev-browser > .bar{ flex: none; display: flex; align-items: center; gap: 1.2em; height: 3.8em; padding: 0 1.4em; background: var(--g50); border-bottom: 1px solid var(--g100); }
.dev-browser > .bar .dots{ display: flex; gap: .6em; }
.dev-browser > .bar .dots i{ display: block; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--g200); }
.dev-browser > .bar .crumb{ flex: 1; display: flex; justify-content: center; }
.dev-browser > .bar .crumb span{ padding: .5em 1.4em; border-radius: 99em; background: var(--white); color: var(--g600); font: 500 1.15em/1 var(--f-sans); box-shadow: 0 0 0 1px var(--g100); }
.dev-browser > .body{ position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dev-tablet{ --w: 420px; position: relative; width: var(--w); max-width: 100%; aspect-ratio: 420 / 560; flex: none; border-radius: calc(var(--w) * .07); background: var(--black); padding: calc(var(--w) * .035); font-size: calc(var(--w) / 42); box-shadow: inset 0 0 0 1px var(--g900), 0 50px 90px -40px rgba(42, 7, 20, .5); }
.dev-tablet > .scr{ position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .04); background: var(--white); }
.scr > .shot{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dev-tablet > .scr > .shot{ object-position: 50% 50%; }
.dev-browser > .body > .shot{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dev-phone > .scr:has(> .shot)::before{ content: none; }
.mk-mt{ position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4.6em 1.5em 0; background: linear-gradient(180deg, var(--blush-50), var(--white) 38%); color: var(--black); font-family: var(--f-sans); }
.mk-sb{ position: absolute; top: 1.35em; left: 2.4em; right: 2.4em; display: flex; justify-content: space-between; font: 600 1.2em/1 var(--f-sans); }
.mk-sb b{ display: flex; gap: .3em; align-items: center; }
.mk-sb b i{ display: block; width: .35em; border-radius: .1em; background: currentColor; }
.mk-mt-head{ display: flex; align-items: center; justify-content: space-between; }
.mk-mt-head h4{ margin: 0; font: 900 2.3em/1.05 var(--f-display); letter-spacing: -.01em; }
.mk-mt-head small{ display: block; margin-top: .2em; color: var(--g600); font: 500 1.15em/1.2 var(--f-sans); }
.mk-stars{ display: flex; align-items: center; gap: .35em; padding: .5em .8em; border-radius: 99em; background: var(--white); box-shadow: 0 .3em 1em rgba(90, 15, 46, .12); font: 800 1.35em/1 var(--f-display); }
.mk-stars svg{ width: 1.1em; height: 1.1em; fill: var(--amber-500); stroke: none; }
.mk-prog{ margin-top: 1.4em; padding: 1.3em 1.4em; border-radius: 1.8em; background: var(--burgundy); color: var(--white); }
.mk-prog small{ color: var(--burgundy-200); font: 500 1.1em/1 var(--f-sans); }
.mk-prog b{ display: block; margin-top: .25em; font: 900 2.2em/1 var(--f-display); }
.mk-prog .trk{ height: .7em; margin-top: .9em; border-radius: 99em; background: rgba(255, 255, 255, .22); overflow: hidden; }
.mk-prog .trk i{ display: block; height: 100%; width: 60%; border-radius: inherit; background: var(--white); transition: width .6s var(--ease); }
.mk-tasks{ display: flex; flex-direction: column; gap: .7em; margin-top: 1.2em; }
.mk-task{ position: relative; display: flex; align-items: center; gap: 1em; padding: 1.05em 1.1em; border-radius: 1.4em; background: var(--white); box-shadow: 0 .15em .6em rgba(42, 7, 20, .06), 0 0 0 1px rgba(90, 15, 46, .05); }
.mk-chk{ flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; box-shadow: inset 0 0 0 .2em var(--g200); transition: background .3s, box-shadow .3s; }
.mk-chk svg{ width: 1.3em; height: 1.3em; stroke: var(--white); stroke-width: 3.2; fill: none; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease); }
.mk-task > span:not(.mk-chk){ flex: 1; font: 600 1.3em/1.2 var(--f-sans); transition: color .3s; }
.mk-task em{ font: 700 1.1em/1 var(--f-mono); font-style: normal; color: var(--amber); }
.mk-task.done .mk-chk{ background: var(--burgundy); box-shadow: none; }
.mk-task.done .mk-chk svg{ opacity: 1; transform: none; }
.mk-task.done > span:not(.mk-chk){ color: var(--g400); text-decoration: line-through; text-decoration-color: var(--g300); }
.mk-pop{ position: absolute; right: 1.2em; top: .2em; font: 800 1.3em/1 var(--f-display); color: var(--amber); opacity: 0; pointer-events: none; }
.mk-tabs{ position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; height: 6.4em; padding-bottom: 1em; background: var(--white); border-top: 1px solid var(--g100); }
.mk-tabs .it{ display: flex; flex-direction: column; align-items: center; gap: .3em; color: var(--g400); font: 600 1em/1 var(--f-sans); text-decoration: none; }
.mk-tabs .it.on{ color: var(--burgundy); }
.mk-tabs .ico{ width: 2em; height: 2em; }
.mk-mt-rewards .mk-rw{ display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: 1.2em; }
.mk-rw div{ padding: 1.2em 1em; border-radius: 1.4em; background: var(--white); box-shadow: 0 .15em .6em rgba(42, 7, 20, .06); }
.mk-rw div i{ display: grid; place-items: center; width: 3.4em; height: 3.4em; margin-bottom: .8em; border-radius: 1em; background: var(--blush); color: var(--burgundy); }
.mk-rw div i .ico{ width: 1.8em; height: 1.8em; }
.mk-rw div b{ display: block; font: 800 1.3em/1.15 var(--f-display); }
.mk-rw div small{ display: flex; align-items: center; gap: .3em; margin-top: .4em; color: var(--amber); font: 700 1.1em/1 var(--f-mono); }
.mk-rw div small svg{ width: 1em; height: 1em; fill: var(--amber-500); stroke: none; }
.mk-trail{ position: relative; flex: 1; margin: 1em -1.5em 0; }
.mk-trail svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-mc{ position: absolute; inset: 0; display: grid; grid-template-columns: 15em 1fr; font-family: var(--f-sans); color: var(--black); }
.mk-mc aside{ padding: 1.6em 1.2em; background: var(--g50); border-right: 1px solid var(--g100); }
.mk-mc aside b{ display: block; margin-bottom: 1.2em; font: 800 1.4em/1 var(--f-display); }
.mk-mc aside .it{ display: flex; align-items: center; gap: .8em; padding: .6em; border-radius: .8em; color: var(--g600); font: 500 1.1em/1 var(--f-sans); text-decoration: none; }
.mk-mc aside .it i{ display: block; width: 2.4em; height: 3.6em; border-radius: .4em; background: var(--white); box-shadow: 0 0 0 1px var(--g200); }
.mk-mc aside .it.on{ background: var(--white); color: var(--black); box-shadow: 0 .1em .4em rgba(0, 0, 0, .06); }
.mk-mc aside .it.on i{ box-shadow: 0 0 0 1px var(--burgundy-300); background: var(--blush); }
.mk-mc main{ position: relative; padding: 1.6em 1.8em; min-width: 0; }
.mk-mc .top{ display: flex; align-items: center; gap: .8em; margin-bottom: 1.4em; }
.mk-mc .top h5{ margin: 0 auto 0 0; font: 800 1.7em/1 var(--f-display); }
.mk-mc .chip{ padding: .45em .8em; border-radius: 99em; background: var(--g50); box-shadow: 0 0 0 1px var(--g100); font: 600 1em/1 var(--f-mono); color: var(--g600); }
.mk-mc .chip.on{ background: var(--blush); color: var(--burgundy); box-shadow: none; }
.mk-mc .avs{ display: flex; }
.mk-mc .avs i{ display: grid; place-items: center; width: 2.4em; height: 2.4em; margin-left: -.5em; border-radius: 50%; color: var(--white); font: 700 1em/1 var(--f-sans); font-style: normal; box-shadow: 0 0 0 .2em var(--white); }
.mk-mc .btn{ padding: .7em 1.1em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 600 1.05em/1 var(--f-sans); }
.mk-mc table{ width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 1.1em; }
.mk-mc th{ padding: .7em .8em; text-align: left; color: var(--g500); font: 600 .9em/1 var(--f-mono); letter-spacing: .02em; border-bottom: 1px solid var(--g100); }
.mk-mc td{ position: relative; padding: .95em .8em; border-bottom: 1px solid var(--g100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mc td:first-child{ color: var(--g500); font: 500 .9em/1 var(--f-mono); }
.mk-mc td.edit{ box-shadow: inset 0 0 0 .15em var(--burgundy-600); border-radius: .4em; background: var(--blush-50); overflow: visible; }
.mk-mc td.edit::after{ content: ""; display: inline-block; width: .1em; height: 1.1em; margin-left: .1em; vertical-align: -.15em; background: var(--burgundy); animation: mk-caret 1s steps(1) infinite; }
.mk-cur{ position: absolute; z-index: 4; display: flex; align-items: flex-start; pointer-events: none; transition: transform .9s var(--ease); }
.mk-cur svg{ width: 1.8em; height: 1.8em; }
.mk-cur b{ margin: 1.2em 0 0 -.3em; padding: .3em .6em; border-radius: .4em .8em .8em .8em; color: var(--white); font: 600 .95em/1 var(--f-sans); }
@keyframes mk-caret{ 50% { opacity: 0; } }
.mk-ms{ position: absolute; inset: 0; display: grid; grid-template-columns: 14em 1fr 20em; font-family: var(--f-sans); color: var(--black); }
.mk-ms aside{ padding: 1.6em 1em; background: var(--burgundy); color: var(--white); }
.mk-ms aside b{ display: block; margin: 0 .4em 1.4em; font: 900 1.5em/1 var(--f-display); }
.mk-ms aside .it{ display: flex; align-items: center; gap: .7em; margin-bottom: .3em; padding: .7em .6em; border-radius: .8em; color: var(--burgundy-200); font: 500 1.05em/1.1 var(--f-sans); text-decoration: none; }
.mk-ms aside .it.on{ background: rgba(255, 255, 255, .12); color: var(--white); }
.mk-ms aside .ico{ width: 1.5em; height: 1.5em; }
.mk-ms main{ padding: 1.6em; min-width: 0; display: grid; grid-template-rows: auto 1fr 1fr; gap: 1.2em; background: var(--g50); }
.mk-ms main h5{ margin: 0; font: 800 1.7em/1 var(--f-display); }
.mk-ms .card{ position: relative; padding: 1.2em; border-radius: 1.2em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); overflow: hidden; }
.mk-ms .card small{ color: var(--g500); font: 600 .95em/1 var(--f-mono); }
.mk-ms .bars{ position: absolute; left: 1.2em; right: 1.2em; bottom: 1.2em; top: 3em; display: flex; align-items: flex-end; gap: .7em; }
.mk-ms .bars i{ flex: 1; border-radius: .4em .4em .15em .15em; background: var(--burgundy-300); transform-origin: bottom; animation: mk-bar 4.8s var(--ease-io) infinite; }
.mk-ms .bars i:nth-child(3n){ background: var(--burgundy); }
.mk-ms .line{ position: absolute; left: 1.2em; right: 1.2em; bottom: 1em; top: 3em; }
.mk-ms .line svg{ width: 100%; height: 100%; overflow: visible; }
.mk-ms .line path{ fill: none; stroke: var(--cherry); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: mk-draw 4.8s var(--ease-io) infinite; }
.mk-ms .line path.area{ fill: rgba(200, 16, 46, .08); stroke: none; animation: none; }
.mk-ms .chat{ display: flex; flex-direction: column; gap: .9em; padding: 1.6em 1.2em; background: var(--white); border-left: 1px solid var(--g100); }
.mk-ms .chat > small{ color: var(--g500); font: 600 .95em/1 var(--f-mono); }
.mk-ms .msg{ max-width: 92%; padding: .8em 1em; border-radius: 1em; font: 500 1.05em/1.35 var(--f-sans); }
.mk-ms .msg.me{ align-self: flex-end; background: var(--burgundy); color: var(--white); border-bottom-right-radius: .3em; }
.mk-ms .msg.ai{ background: var(--g50); border-bottom-left-radius: .3em; }
.mk-ms .msg.ai .mini{ display: flex; align-items: flex-end; gap: .35em; height: 4em; margin-top: .7em; }
.mk-ms .msg.ai .mini i{ flex: 1; background: var(--burgundy-400); border-radius: .2em; }
.mk-ms .typing{ display: flex; gap: .3em; padding: .9em 1em; width: max-content; border-radius: 1em; background: var(--g50); }
.mk-ms .typing i{ width: .55em; height: .55em; border-radius: 50%; background: var(--g400); animation: mk-dot 1.2s infinite; }
.mk-ms .typing i:nth-child(2){ animation-delay: .15s; }
.mk-ms .typing i:nth-child(3){ animation-delay: .3s; }
@keyframes mk-bar{ 0%, 8% { transform: scaleY(.08); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
@keyframes mk-draw{ 0%, 5% { stroke-dashoffset: 600; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -600; } }
@keyframes mk-dot{ 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-.3em); opacity: 1; } }
.mk-bj{ position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--f-sans); color: var(--black); background: var(--white); }
.mk-bj .top{ display: flex; align-items: center; justify-content: space-between; padding: 1.6em 1.8em 1em; }
.mk-bj .top b{ font: 900 1.6em/1 var(--f-display); }
.mk-bj .top span{ color: var(--g500); font: 600 1em/1 var(--f-mono); }
.mk-bj .art{ position: relative; flex: 1; margin: 0 1.8em; border-radius: 1.4em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); overflow: hidden; }
.mk-bj .art svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-bj .art .rg{ fill: var(--white); stroke: var(--black); stroke-width: 2.2; stroke-linejoin: round; animation: bj-fill 9s var(--ease) infinite; }
.mk-bj .art .ln{ fill: none; stroke: var(--black); stroke-width: 2.2; stroke-linecap: round; }
.mk-bj .pal{ display: flex; justify-content: center; gap: .9em; padding: 1.4em 1em 1.8em; }
.mk-bj .pal i{ width: 2.6em; height: 2.6em; border-radius: 50%; box-shadow: inset 0 0 0 .15em rgba(0, 0, 0, .08); }
.mk-bj .pal i.on{ box-shadow: 0 0 0 .25em var(--white), 0 0 0 .45em var(--black); }
@keyframes bj-fill{ 0% { fill: var(--white); } 6%, 88% { fill: var(--c); } 100% { fill: var(--white); } }
@media (prefers-reduced-motion: reduce){*, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.mk-ms .bars i{ animation: none !important; transform: none; }
.mk-ms .line path{ animation: none !important; stroke-dashoffset: 0; }
.mk-bj .art .rg{ animation: none !important; fill: var(--c); }}
.mk-trail .stop{ fill: var(--white); stroke: var(--burgundy); stroke-width: 3; }
.mk-trail .stop.done{ fill: var(--burgundy); }
.mk-trail .road{ fill: none; stroke: var(--burgundy-200); stroke-width: 14; stroke-linecap: round; }
.mk-trail .road-done{ fill: none; stroke: var(--burgundy); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: mk-road 6s var(--ease-io) infinite; }
@keyframes mk-road{ 0%, 10% { stroke-dashoffset: 1000; } 60%, 90% { stroke-dashoffset: 560; } 100% { stroke-dashoffset: 1000; } }
.mk-export{ position: absolute; right: 1.6em; bottom: 1.6em; width: 26em; padding: 1.4em; border-radius: 1.2em; background: var(--g950); color: var(--g200); font: 500 1.05em/1.55 var(--f-mono); box-shadow: 0 2em 4em -1.5em rgba(0, 0, 0, .5); }
.mk-export b{ color: var(--burgundy-300); font-weight: 500; }
.mk-export i{ color: var(--green-300); font-style: normal; }
.mk-export small{ display: block; margin-bottom: .8em; color: var(--g400); font-size: .9em; }
.mk-pubs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.mk-pubs div{ aspect-ratio: 3 / 4; padding: 1em; border-radius: .8em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); display: flex; flex-direction: column; gap: .5em; }
.mk-pubs div b{ height: 1em; width: 70%; border-radius: .2em; background: var(--burgundy); }
.mk-pubs div i{ height: .5em; border-radius: .2em; background: var(--g200); }
.mk-pubs div em{ flex: 1; margin-top: .4em; border-radius: .4em; background: linear-gradient(180deg, var(--blush), var(--blush-50)); }
.mk-gal{ display: grid; grid-template-columns: 1fr 1fr; gap: 1em; padding: 0 1.8em 1.8em; flex: 1; }
.mk-gal div{ border-radius: 1em; box-shadow: 0 0 0 1px var(--g100); overflow: hidden; position: relative; }
.mk-gal div svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-sw{ display: grid; grid-template-columns: repeat(6, 1fr); gap: .9em; padding: 0 1.8em; }
.mk-sw i{ aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 .15em rgba(0, 0, 0, .08); }
.mk-mc.tone th:nth-child(2), .mk-mc.tone td:nth-child(2){ opacity: .3; }
.mk-mc.tone td:nth-child(3), .mk-mc.tone td:nth-child(4){ background: var(--blush-50); }
.mk-mc.tone th:nth-child(3), .mk-mc.tone th:nth-child(4){ color: var(--burgundy); }
.mk-pw{ padding-bottom: 2.4em; text-align: center; }
.mk-pw .tp{ display: flex; align-items: center; justify-content: space-between; color: var(--g600); font: 600 1.15em/1 var(--f-sans); }
.mk-pw .tp .ico{ width: 1.7em; height: 1.7em; }
.mk-pw .md{ align-self: center; display: grid; place-items: center; width: 5.6em; height: 5.6em; margin-top: .6em; border-radius: 50%; background: var(--amber-500); box-shadow: 0 0 0 .6em rgba(197, 131, 59, .16); }
.mk-pw .md svg{ width: 3em; height: 3em; fill: var(--white); }
.mk-pw .tr{ align-self: center; display: inline-flex; align-items: center; gap: .45em; margin-top: 1.3em; padding: .6em 1em .6em .8em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 700 1.1em/1 var(--f-sans); }
.mk-pw .tr .ico{ width: 1.25em; height: 1.25em; color: var(--amber-300); }
.mk-pw h4{ margin: .55em 0 0; font: 900 2.6em/1.02 var(--f-display); letter-spacing: -.015em; }
.mk-pw .sub{ margin: .55em 0 0; color: var(--g600); font: 500 1.2em/1.3 var(--f-sans); }
.mk-pw .pls{ display: grid; gap: .8em; margin-top: 1.6em; }
.mk-pw .pl{ display: flex; text-align: left; align-items: center; gap: 1em; padding: 1.1em 1.2em; border-radius: 1.4em; background: var(--white); box-shadow: 0 .15em .6em rgba(42, 7, 20, .06), 0 0 0 1px rgba(90, 15, 46, .08); }
.mk-pw .pl > span{ flex: 1; min-width: 0; }
.mk-pw .pl b{ display: block; font: 800 1.45em/1.1 var(--f-display); }
.mk-pw .pl small{ display: block; margin-top: .3em; color: var(--g500); font: 500 1.05em/1.2 var(--f-sans); }
.mk-pw .pl em{ flex: none; padding: .45em .7em; border-radius: 99em; background: var(--blush); color: var(--burgundy); font: 700 .95em/1 var(--f-sans); font-style: normal; }
.mk-pw .rd{ flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; box-shadow: inset 0 0 0 .2em var(--g200); }
.mk-pw .rd svg{ width: 1.3em; height: 1.3em; fill: none; stroke: var(--white); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.mk-pw .pl.on{ box-shadow: 0 0 0 .2em var(--burgundy), 0 .8em 1.6em -.8em rgba(90, 15, 46, .4); }
.mk-pw .pl.on .rd{ background: var(--burgundy); box-shadow: none; }
.mk-pw .pl.on .rd svg{ opacity: 1; }
.mk-pw .go{ display: grid; place-items: center; height: 3.4em; margin-top: auto; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 700 1.35em/1 var(--f-sans); box-shadow: 0 .8em 1.4em -.7em rgba(90, 15, 46, .55); }
.mk-pw .fp{ margin-top: .9em; color: var(--g500); font: 500 1em/1.2 var(--f-sans); text-align: center; }
.mk-op{ position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 4.4em; background: var(--white); color: var(--black); font-family: var(--f-sans); }
.mk-op .hd{ display: flex; align-items: center; gap: .8em; padding: .3em 1.4em 1.1em; border-bottom: 1px solid var(--g100); }
.mk-op .hd .ico{ width: 2em; height: 2em; color: var(--g600); }
.mk-op .hd b{ flex: 1; min-width: 0; font: 900 1.9em/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.mk-op .hd em{ flex: none; padding: .5em .75em; border-radius: 99em; background: var(--blush); color: var(--burgundy); font: 700 .95em/1 var(--f-sans); font-style: normal; }
.mk-op .bd{ flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8em; padding: 1.2em 1.2em 0; background: var(--g50); }
.mk-op .tag, .mk-ad .tag{ flex: none; padding: .42em .7em; border-radius: 99em; font: 600 .95em/1 var(--f-sans); font-style: normal; white-space: nowrap; }
.mk-op .tag.op, .mk-ad .tag.op{ background: rgba(178, 106, 0, .12); color: var(--amber); }
.mk-op .tag.rg, .mk-ad .tag.rg{ background: rgba(200, 16, 46, .1); color: var(--cherry); }
.mk-op .tag.ok, .mk-ad .tag.ok{ background: rgba(31, 122, 76, .1); color: var(--green); }
.mk-ad .tag.wt{ background: var(--g100); color: var(--g600); }
.mk-op .who{ display: flex; align-items: center; gap: .9em; padding: .9em 1em; border-radius: 1.3em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); }
.mk-op .who > i{ flex: none; display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: var(--amber-300); font: 800 1.1em/1 var(--f-display); font-style: normal; }
.mk-op .who > span{ flex: 1; min-width: 0; }
.mk-op .who b{ display: block; font: 700 1.3em/1.1 var(--f-sans); }
.mk-op .who small{ display: block; margin-top: .3em; color: var(--g500); font: 500 1em/1.2 var(--f-sans); }
.mk-op .dy{ align-self: center; margin-top: .2em; color: var(--g500); font: 500 .95em/1 var(--f-mono); }
.mk-op .msg{ max-width: 88%; padding: .85em 1.05em; border-radius: 1.3em 1.3em 1.3em .4em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); font: 500 1.2em/1.35 var(--f-sans); }
.mk-op .msg.me{ align-self: flex-end; border-radius: 1.3em 1.3em .4em 1.3em; background: var(--burgundy); color: var(--white); box-shadow: none; }
.mk-op .rp{ display: flex; align-items: flex-end; gap: .7em; margin: auto -1.2em 0; padding: 1em 1.2em 2.6em; border-top: 1px solid var(--g100); background: var(--white); }
.mk-op .rp .tx{ flex: 1; min-height: 4.4em; padding: .75em 1em; border-radius: 1.2em; background: var(--blush-50); box-shadow: inset 0 0 0 .15em var(--burgundy-600); font: 500 1.15em/1.35 var(--f-sans); }
.mk-op .rp .tx::after{ content: ""; display: inline-block; width: .1em; height: 1.1em; margin-left: .1em; vertical-align: -.15em; background: var(--burgundy); animation: mk-caret 1s steps(1) infinite; }
.mk-op .rp > i{ flex: none; display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--burgundy); color: var(--white); }
.mk-op .rp > i .ico{ width: 1.6em; height: 1.6em; }
.mk-op .fl{ display: flex; gap: .45em; }
.mk-op .fl span{ padding: .55em .8em; border-radius: 99em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); color: var(--g600); font: 600 1em/1 var(--f-sans); }
.mk-op .fl span.on{ background: var(--black); color: var(--white); box-shadow: none; }
.mk-op .eg{ padding: 1em 1.1em 1.1em; border-radius: 1.3em; background: var(--white); box-shadow: 0 .15em .6em rgba(42, 7, 20, .05), 0 0 0 1px var(--g100); }
.mk-op .eg .r1{ display: flex; align-items: center; gap: .6em; min-width: 0; }
.mk-op .eg code{ min-width: 0; overflow: hidden; color: var(--g500); font: 500 .9em/1 var(--f-mono); white-space: nowrap; text-overflow: ellipsis; }
.mk-op .eg > b{ display: block; margin-top: .6em; font: 700 1.25em/1.2 var(--f-sans); }
.mk-op .eg .r2{ display: flex; align-items: flex-end; gap: .9em; margin-top: .7em; color: var(--g600); font: 500 1em/1 var(--f-sans); }
.mk-op .eg .r2 > span:not(.sp){ display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.mk-op .eg .r2 .ico{ width: 1.15em; height: 1.15em; }
.mk-op .eg .sp{ display: flex; align-items: flex-end; gap: .2em; height: 2em; margin-left: auto; }
.mk-op .eg .sp i{ width: .5em; border-radius: .12em; background: var(--g200); }
.mk-op .eg.op .sp i{ background: var(--amber-300); }
.mk-op .eg.rg .sp i{ background: var(--cherry-400); }
.mk-op .eg.ok > b{ color: var(--g500); }
.mk-op .rg9{ display: flex; align-items: center; justify-content: center; gap: .4em; margin: auto 0 2.6em; color: var(--g500); font: 500 .95em/1 var(--f-mono); }
.mk-op .rg9 .ico{ width: 1.2em; height: 1.2em; }
.mk-ma{ position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--white); color: var(--black); font-family: var(--f-sans); }
.mk-ma .top{ display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: 1.6em 1.8em 1em; }
.mk-ma .top b{ font: 900 1.6em/1 var(--f-display); }
.mk-ma .top span{ color: var(--g500); font: 600 1em/1 var(--f-mono); }
.mk-ma .r, .mk-ma-c .art .r{ stroke: var(--black); stroke-width: 2.2; stroke-linejoin: round; }
.mk-ma .ln{ fill: none; stroke: var(--black); stroke-width: 2.2; stroke-linecap: round; }
.mk-ma .cut path{ fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.6; }
.mk-ma .gap path{ fill: var(--g100); stroke: var(--g300); stroke-width: 1.4; }
.mk-ma .loose .sh{ fill: rgba(42, 7, 20, .28); transform: translate(3px, 6px); }
.mk-ma .loose .ed9{ fill: none; stroke: var(--white); stroke-width: 2.4; }
.mk-ma-g .gms{ flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1em; padding: 0 1.8em 1.8em; }
.mk-ma .gm{ display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 1.4em; background: var(--white); box-shadow: 0 0 0 1px var(--g100), 0 .5em 1.4em -.8em rgba(42, 7, 20, .25); }
.mk-ma .gm.big{ grid-column: 1 / -1; flex-direction: row; }
.mk-ma .gm.big .pic{ flex: none; width: 54%; }
.mk-ma .gm.big .tx{ display: flex; flex-direction: column; justify-content: center; padding: 1.4em 1.5em; }
.mk-ma .gm.big .tx b{ font-size: 1.75em; white-space: normal; }
.mk-ma .pal9{ display: flex; gap: .4em; margin-top: 1.2em; }
.mk-ma .pal9 i{ width: 1.6em; height: 1.6em; border-radius: 50%; box-shadow: inset 0 0 0 .12em rgba(0, 0, 0, .08); }
.mk-ma .pal9 i.on{ box-shadow: 0 0 0 .2em var(--white), 0 0 0 .35em var(--black); }
.mk-ma .go9{ align-self: flex-start; margin-top: 1.3em; padding: .75em 1.1em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 700 1.05em/1 var(--f-sans); white-space: nowrap; }
.mk-ma .gm .pic{ position: relative; flex: 1; min-height: 0; background: var(--g50); }
.mk-ma .gm .pic > svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-ma .gm.pz .pic > svg, .mk-ma .gm.mm .pic > svg{ inset: 9% 7%; width: 86%; height: 82%; }
.mk-ma .gm .tx{ padding: .85em 1.1em 1em; }
.mk-ma .gm .tx b{ display: block; font: 800 1.3em/1.1 var(--f-display); white-space: nowrap; }
.mk-ma .gm .tx small{ display: block; margin-top: .3em; color: var(--g500); font: 600 .9em/1 var(--f-mono); }
.mk-ma .ol, .mk-ma-c .art .ol{ fill: none; stroke: var(--black); stroke-width: 2.2; stroke-linejoin: round; }
.mk-ma .brush, .mk-ma-c .art .brush{ fill: none; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.mk-ma-c .art .brush{ stroke-dasharray: 1; animation: m9-paint 7s var(--ease-io) infinite; }
.mk-ma-c .tools{ display: flex; align-items: center; justify-content: center; gap: 1em; padding: 1.3em 1em 0; }
.mk-ma-c .sz{ display: flex; align-items: center; gap: .3em; padding: .3em; border-radius: 99em; background: var(--g50); box-shadow: inset 0 0 0 1px var(--g100); }
.mk-ma-c .sz i{ display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; }
.mk-ma-c .sz i b{ border-radius: 50%; background: var(--black); }
.mk-ma-c .sz i.on{ background: var(--white); box-shadow: 0 0 0 .15em var(--black); }
.mk-ma-c .sep{ width: 1px; height: 2.2em; background: var(--g200); }
.mk-ma-c .tl{ display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--g50); box-shadow: inset 0 0 0 1px var(--g100); color: var(--g800); }
.mk-ma-c .tl .ico{ width: 1.6em; height: 1.6em; }
.mk-ma-c .pal{ padding-top: 1.2em; }
.mk-ma-t .map{ position: relative; flex: 1; min-height: 0; margin: 0 1.8em; overflow: hidden; border-radius: 1.4em; box-shadow: 0 0 0 1px var(--g100); }
.mk-ma-t .map > svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-ma-t .ld{ fill: #FAEADB; }
.mk-ma-t .sea{ fill: var(--green-300); }
.mk-ma-t .wv{ fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; }
.mk-ma-t .mt9{ fill: var(--amber-300); }
.mk-ma-t .sn{ fill: var(--white); }
.mk-ma-t .tr9 circle{ fill: #58A478; }
.mk-ma-t .hs rect{ fill: var(--white); stroke: var(--g600); stroke-width: 1.2; }
.mk-ma-t .road{ fill: none; stroke: var(--burgundy-400); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .1 11; }
.mk-ma-t .road-dn{ fill: none; stroke: var(--burgundy); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; animation: m9-trail 6s var(--ease-io) infinite; }
.mk-ma-t .st{ fill: var(--white); stroke: var(--burgundy); stroke-width: 3; }
.mk-ma-t .st.dn{ fill: var(--burgundy); }
.mk-ma-t .st.cu{ stroke-width: 4; }
.mk-ma-t .halo{ fill: rgba(90, 15, 46, .14); }
.mk-ma-t .tk{ fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk-ma-t .pz{ fill: var(--burgundy); }
.mk-ma-t .lb{ fill: var(--white); stroke: rgba(90, 15, 46, .18); }
.mk-ma-t text{ fill: var(--black); font: 800 12px/1 var(--f-display); text-anchor: middle; }
.mk-ma-t .chest rect{ fill: var(--amber-500); stroke: #8B5200; stroke-width: 2; }
.mk-ma-t .chest .lid{ fill: #8B5200; }
.mk-ma-t .chest .lk{ fill: var(--amber-300); stroke: none; }
.mk-ma-t .jig{ position: relative; display: flex; align-items: center; gap: 1.3em; margin: -3em 2.8em 1.8em; padding: 1.1em 1.3em 1.1em 1em; border-radius: 1.4em; background: var(--white); box-shadow: 0 0 0 1px var(--g100), 0 1em 2em -1em rgba(42, 7, 20, .3); }
.mk-ma-t .bd9{ position: relative; flex: none; width: 13.5em; aspect-ratio: 324 / 261; }
.mk-ma-t .bd9 > svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-ma-t .jig .tx{ flex: 1; min-width: 0; }
.mk-ma-t .jig small{ color: var(--g500); font: 600 .95em/1 var(--f-mono); }
.mk-ma-t .jig .tx > b{ display: block; margin-top: .3em; font: 900 1.8em/1 var(--f-display); white-space: nowrap; }
.mk-ma-t .pg{ display: block; height: .7em; margin-top: .9em; overflow: hidden; border-radius: 99em; background: var(--g100); }
.mk-ma-t .pg b{ display: block; height: 100%; border-radius: inherit; background: var(--burgundy); }
.mk-ma-t .jig .tx > span{ display: block; margin-top: .6em; color: var(--g600); font: 500 1em/1.2 var(--f-sans); }
.mk-ma .top .tm{ display: inline-flex; align-items: center; gap: .35em; color: var(--burgundy); font: 700 1.25em/1 var(--f-mono); }
.mk-ma .top .tm .ico{ width: 1.2em; height: 1.2em; }
.mk-ma-m .tb{ height: .8em; margin: 0 1.8em; overflow: hidden; border-radius: 99em; background: var(--g100); }
.mk-ma-m .tb i{ display: block; width: 70%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--amber-500), var(--burgundy-600)); }
.mk-ma-m .cds{ flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .9em; padding: 1.3em 1.8em; }
.mk-ma-m .cd{ display: grid; place-items: center; border-radius: 1em; background: var(--burgundy); box-shadow: inset 0 0 0 .45em var(--burgundy), inset 0 0 0 .6em var(--burgundy-600); transition: background .3s, box-shadow .3s; }
.mk-ma-m .cd b{ width: 2em; height: 2em; border-radius: .45em; background: var(--burgundy-600); transform: rotate(45deg); }
.mk-ma-m .cd svg{ width: 72%; height: 72%; }
.mk-ma-m .cd.up{ background: var(--white); box-shadow: 0 0 0 .22em var(--green), 0 .6em 1.2em -.6em rgba(31, 122, 76, .45); }
.mk-ma-m .cd.up.miss{ box-shadow: 0 0 0 .2em var(--g200); }
.mk-ma-m .story{ display: flex; align-items: center; gap: 1.2em; margin: 0 1.8em 1.8em; padding: 1.1em 1.3em; border-radius: 1.4em; background: var(--blush-50); box-shadow: inset 0 0 0 1px rgba(90, 15, 46, .1); }
.mk-ma-m .story > i{ flex: none; display: grid; place-items: center; width: 4.8em; height: 4.8em; border-radius: 1em; background: var(--white); box-shadow: 0 0 0 .2em var(--green); }
.mk-ma-m .story > i svg{ width: 3.4em; height: 3.4em; }
.mk-ma-m .story > span{ flex: 1; min-width: 0; display: grid; gap: .45em; }
.mk-ma-m .story small{ color: var(--green); font: 700 .95em/1 var(--f-sans); }
.mk-ma-m .story b{ font: 900 1.6em/1 var(--f-display); }
.mk-ma-m .story em{ height: .6em; border-radius: .3em; background: var(--burgundy-200); }
.mk-cy{ position: absolute; inset: 0; display: grid; grid-template-columns: 7em minmax(0, 1fr) 21em; color: var(--black); font-family: var(--f-sans); }
.mk-cy.wide{ grid-template-columns: 7em minmax(0, 1fr); }
.mk-cy .rail{ display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 1.4em .6em; background: var(--g50); border-right: 1px solid var(--g100); }
.mk-cy .rail .it{ display: flex; flex-direction: column; align-items: center; gap: .35em; width: 100%; padding: .7em 0 .6em; border-radius: .9em; color: var(--g500); font: 600 .9em/1 var(--f-sans); }
.mk-cy .rail .ico{ width: 1.7em; height: 1.7em; }
.mk-cy .rail .it.on{ background: var(--white); color: var(--burgundy); box-shadow: 0 .1em .4em rgba(0, 0, 0, .06), 0 0 0 1px var(--g100); }
.mk-cy .rail .sep{ width: 60%; height: 1px; margin: .5em 0; background: var(--g200); }
.mk-cy main{ position: relative; min-width: 0; display: flex; flex-direction: column; padding: 1.4em 1.8em; background: radial-gradient(circle, var(--g200) .09em, transparent .12em) 0 0 / 1.6em 1.6em, var(--white); }
.mk-cy .top{ display: flex; align-items: center; gap: .7em; white-space: nowrap; }
.mk-cy .top b{ font: 800 1.5em/1 var(--f-display); }
.mk-cy .top > span{ color: var(--g600); font: 500 1.1em/1 var(--f-sans); }
.mk-cy .top .sl{ color: var(--g300); }
.mk-cy .top .chip{ padding: .45em .8em; border-radius: 99em; background: var(--g50); box-shadow: 0 0 0 1px var(--g100); color: var(--g600); font: 600 .95em/1 var(--f-mono); }
.mk-cy .top .chip.on{ background: var(--blush); color: var(--burgundy); box-shadow: none; }
.mk-cy .avs{ display: flex; margin-left: auto; padding-left: .5em; }
.mk-cy .avs i{ display: grid; place-items: center; width: 2.4em; height: 2.4em; margin-left: -.5em; border-radius: 50%; box-shadow: 0 0 0 .2em var(--white); color: var(--white); font: 700 1em/1 var(--f-sans); font-style: normal; }
.mk-cy .top .btn{ padding: .7em 1.1em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 600 1.05em/1 var(--f-sans); }
.mk-cy .top .live{ display: inline-flex; align-items: center; gap: .4em; padding: .45em .8em; border-radius: 99em; background: rgba(31, 122, 76, .1); color: var(--green); font: 600 1em/1 var(--f-sans); }
.mk-cy .top .live::before{ content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.mk-cy .seg{ display: flex; margin-left: auto; padding: .25em; border-radius: 99em; background: var(--g50); box-shadow: 0 0 0 1px var(--g100); }
.mk-cy .seg i{ position: relative; padding: .45em .9em; border-radius: 99em; color: var(--g600); font: 600 1em/1 var(--f-mono); font-style: normal; }
.mk-cy .seg i.on{ background: var(--white); color: var(--black); box-shadow: 0 .1em .3em rgba(0, 0, 0, .12); }
.mk-cy .seg em{ position: absolute; top: .15em; right: .2em; width: .6em; height: .6em; border-radius: 50%; background: var(--amber-500); }
.mk-cy .cv{ position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3em; padding-top: 1em; }
.mk-cy figure{ display: flex; flex-direction: column; align-items: center; gap: .7em; margin: 0; }
.mk-cy figcaption{ color: var(--g500); font: 600 .95em/1 var(--f-mono); }
.mk-cy .lp{ position: relative; flex: none; width: 15.6em; height: 32em; padding: .5em; border-radius: 2.4em; background: var(--black); box-shadow: 0 1.4em 2.8em -1.4em rgba(42, 7, 20, .5); }
.mk-cy figure .lp{ height: 30.4em; width: 14.8em; }
.mk-cy figure .lp h6{ font-size: 1.62em; }
.mk-cy .lp .s{ position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 3em 1.2em 1.6em; overflow: hidden; border-radius: 1.95em; background: linear-gradient(180deg, #FFF8F1, var(--white) 46%); text-align: center; }
.mk-cy .lp .hero{ position: relative; flex: none; width: 8em; height: 8em; border-radius: 50%; background: radial-gradient(circle, rgba(226, 190, 157, .95) 0 28%, rgba(226, 190, 157, .4) 29% 50%, transparent 70%); }
.mk-cy .lp .hero b{ position: absolute; left: 50%; top: 50%; width: 3.6em; height: 1.8em; margin: -1.5em 0 0 -1.8em; border-radius: 1.8em 1.8em 0 0; background: linear-gradient(180deg, #F2B66D, var(--amber-500)); }
.mk-cy .lp .hero b::after{ content: ""; position: absolute; left: -.9em; right: -.9em; bottom: -.4em; height: .4em; border-radius: .2em; background: var(--g950); }
.mk-cy .lp h6{ margin: .9em 0 0; font: 900 1.8em/1.02 var(--f-display); letter-spacing: -.01em; }
.mk-cy .lp .sub{ margin: .6em 0 0; color: var(--g600); font: 500 1.05em/1.3 var(--f-sans); }
.mk-cy .lp .cta{ display: grid; place-items: center; width: 100%; height: 3.2em; margin-top: auto; border-radius: 99em; background: var(--g950); color: var(--white); font: 700 1.1em/1 var(--f-sans); }
.mk-cy .lp .lk{ margin-top: .9em; color: var(--burgundy); font: 600 .95em/1.2 var(--f-sans); }
.mk-cy .lp [data-s]{ position: relative; }
.mk-cy .lp .ed{ display: inline-block; border-radius: .25em; background: var(--blush-50); box-shadow: 0 0 0 .14em var(--burgundy-600); }
.mk-cy .lp .ed::after{ content: ""; display: inline-block; width: .07em; height: .9em; margin-left: .06em; vertical-align: -.08em; background: var(--burgundy); animation: mk-caret 1s steps(1) infinite; }
.mk-cy .lp .al{ align-items: stretch; text-align: left; }
.mk-cy .lp label{ margin-top: 1.1em; color: var(--g600); font: 600 .9em/1 var(--f-sans); }
.mk-cy .lp .fld{ display: block; margin-top: .45em; padding: .8em .8em; border-radius: .8em; box-shadow: inset 0 0 0 1px var(--g200); color: var(--g400); font: 500 .95em/1 var(--f-sans); font-style: normal; }
.mk-cy .lp .ok{ display: grid; place-items: center; width: 6em; height: 6em; margin-top: 2.4em; border-radius: 50%; background: rgba(31, 122, 76, .12); }
.mk-cy .lp .ok svg{ width: 3em; height: 3em; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk-cy .lp .toast{ margin-top: auto; padding: .7em 1.1em; border-radius: 99em; background: var(--g950); color: var(--white); font: 600 .95em/1 var(--f-sans); }
.mk-cy mark{ padding: 0 .1em; border-radius: .2em; background: var(--burgundy-200); color: var(--burgundy); }
.mk-cy .cta mark{ background: var(--burgundy-300); }
.mk-cy .ht{ position: absolute; left: 50%; top: 50%; width: calc(10em * var(--s)); height: calc(10em * var(--s)); margin: calc(-5em * var(--s)) 0 0 calc(-5em * var(--s)); border-radius: 50%; background: radial-gradient(circle, rgba(200, 16, 46, .62) 0, rgba(229, 62, 74, .42) 24%, rgba(197, 131, 59, .24) 48%, transparent 68%); pointer-events: none; animation: m9-heat 3.2s var(--ease-io) infinite; }
.mk-cy .pn{ min-width: 0; display: flex; flex-direction: column; gap: .65em; padding: 1.4em 1.3em; background: var(--white); border-left: 1px solid var(--g100); }
.mk-cy .pt{ display: flex; align-items: baseline; justify-content: space-between; gap: .6em; margin-top: .3em; white-space: nowrap; }
.mk-cy .pt b{ font: 800 1.3em/1 var(--f-display); }
.mk-cy .pt span{ color: var(--g500); font: 500 .9em/1 var(--f-mono); }
.mk-cy .st{ display: grid; gap: .4em; padding: .75em .9em; border-radius: .9em; box-shadow: 0 0 0 1px var(--g100); }
.mk-cy .st code{ overflow: hidden; color: var(--g500); font: 500 .85em/1 var(--f-mono); white-space: nowrap; text-overflow: ellipsis; }
.mk-cy .st span{ font: 500 1.05em/1.3 var(--f-sans); }
.mk-cy .st.on{ background: var(--blush-50); box-shadow: 0 0 0 .14em var(--burgundy-600); }
.mk-cy .st.on code{ color: var(--burgundy); }
.mk-cy .gap{ display: flex; gap: .7em; margin-top: auto; padding: .9em; border-radius: .9em; background: rgba(178, 106, 0, .08); }
.mk-cy .gap > i{ flex: none; width: .8em; height: .8em; margin-top: .2em; border-radius: 50%; background: var(--amber-500); }
.mk-cy .gap b{ display: block; color: var(--amber); font: 700 1.05em/1.1 var(--f-sans); }
.mk-cy .gap small{ display: block; margin-top: .3em; color: var(--g600); font: 500 .95em/1.3 var(--f-sans); }
.mk-cy .sts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.mk-cy .sts div{ padding: .8em .7em; border-radius: .9em; background: var(--g50); }
.mk-cy .sts b{ display: block; font: 900 1.7em/1 var(--f-display); }
.mk-cy .sts small{ display: block; margin-top: .35em; color: var(--g500); font: 500 .82em/1 var(--f-sans); white-space: nowrap; }
.mk-cy .mt{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35em .6em; }
.mk-cy .mt span{ overflow: hidden; font: 500 1em/1.1 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.mk-cy .mt small{ color: var(--g500); font: 600 .9em/1.1 var(--f-mono); }
.mk-cy .mt i{ grid-column: 1 / -1; height: .5em; overflow: hidden; border-radius: 99em; background: var(--g100); }
.mk-cy .mt i b{ display: block; height: 100%; border-radius: inherit; background: var(--burgundy); }
.mk-ad{ position: absolute; inset: 0; display: grid; grid-template-columns: 15em minmax(0, 1fr); color: var(--black); font-family: var(--f-sans); }
.mk-ad aside{ display: flex; flex-direction: column; gap: .15em; padding: 1.4em .9em 1.2em; background: var(--g50); border-right: 1px solid var(--g100); }
.mk-ad .lg{ display: flex; align-items: center; gap: .55em; margin: 0 .35em 1em; font: 900 1.35em/1 var(--f-display); white-space: nowrap; }
.mk-ad .lg i{ flex: none; width: 1.5em; height: 1.5em; border-radius: .45em; background: linear-gradient(140deg, var(--g800), var(--black)); box-shadow: inset 0 0 0 .3em var(--g950), inset 0 0 0 .45em var(--burgundy-300); }
.mk-ad aside .it{ display: flex; align-items: center; gap: .65em; padding: .6em .65em; border-radius: .8em; color: var(--g600); font: 500 1.02em/1 var(--f-sans); white-space: nowrap; }
.mk-ad aside .ico{ width: 1.35em; height: 1.35em; }
.mk-ad aside .it.on{ background: var(--white); color: var(--burgundy); font-weight: 650; box-shadow: 0 .1em .4em rgba(0, 0, 0, .06), 0 0 0 1px var(--g100); }
.mk-ad .usr{ display: flex; align-items: center; gap: .55em; margin-top: auto; padding: .55em; border-radius: .9em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); color: var(--g600); font: 600 .92em/1.1 var(--f-sans); white-space: nowrap; }
.mk-ad .usr i{ display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--burgundy); color: var(--white); font: 700 .9em/1 var(--f-sans); font-style: normal; }
.mk-ad main{ min-width: 0; display: flex; flex-direction: column; gap: 1.2em; padding: 1.5em 1.8em; background: var(--white); }
.mk-ad .hd{ display: flex; align-items: center; gap: .8em; }
.mk-ad .hd h5{ margin: 0; font: 900 1.9em/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.mk-ad .dt, .mk-ad .chip{ padding: .45em .75em; border-radius: 99em; background: var(--g50); box-shadow: 0 0 0 1px var(--g100); color: var(--g600); font: 500 .95em/1 var(--f-mono); white-space: nowrap; }
.mk-ad .sch{ display: flex; align-items: center; gap: .5em; min-width: 11em; margin-left: auto; padding: .6em 1em; border-radius: 99em; background: var(--g50); box-shadow: inset 0 0 0 1px var(--g100); color: var(--g400); font: 500 1em/1 var(--f-sans); white-space: nowrap; }
.mk-ad .sch .ico{ width: 1.2em; height: 1.2em; }
.mk-ad .tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.mk-ad .tiles.t3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-ad .tl{ position: relative; padding: 1.1em 1.2em 1em; border-radius: 1.2em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); }
.mk-ad .tl small{ display: block; overflow: hidden; color: var(--g500); font: 600 .9em/1 var(--f-mono); white-space: nowrap; text-overflow: ellipsis; }
.mk-ad .tl .fg{ display: block; width: 52%; height: 1.5em; margin-top: .75em; border-radius: .4em; background: repeating-linear-gradient(-45deg, var(--g100) 0 .35em, var(--g50) .35em .7em); }
.mk-ad .tl .sp{ display: block; width: 100%; height: 2.6em; margin-top: .8em; overflow: visible; }
.mk-ad .tl .sp path{ fill: none; stroke: var(--burgundy-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mk-ad .tl em{ position: absolute; right: .9em; top: .8em; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: rgba(31, 122, 76, .1); color: var(--green); }
.mk-ad .tl em .ico{ width: 1.2em; height: 1.2em; }
.mk-ad .tl em.fl9 .ico{ transform: scaleY(-1); }
.mk-ad .pnl{ min-width: 0; padding: 1.1em 1.2em; border-radius: 1.2em; box-shadow: 0 0 0 1px var(--g100); }
.mk-ad .pt{ display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: .6em; white-space: nowrap; }
.mk-ad .pt b{ font: 800 1.25em/1 var(--f-display); }
.mk-ad .pt span{ color: var(--g500); font: 500 .9em/1 var(--f-mono); }
.mk-ad .two{ flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.mk-ad .rw{ display: flex; align-items: center; gap: .6em; padding: .7em 0; border-top: 1px solid var(--g100); white-space: nowrap; }
.mk-ad .rw b{ font: 650 1.02em/1.2 var(--f-sans); }
.mk-ad .rw > b:first-child{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-ad .rw small{ flex: 1; min-width: 0; overflow: hidden; color: var(--g500); font: 500 .95em/1.2 var(--f-sans); text-overflow: ellipsis; }
.mk-ad .av{ flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; font: 700 .85em/1 var(--f-sans); font-style: normal; }
.mk-ad main.ib{ display: grid; grid-template-columns: 19em minmax(0, 1fr) 15em; gap: 0; padding: 0; }
.mk-ad .ls{ display: flex; flex-direction: column; gap: .4em; min-width: 0; padding: 1.3em 1em; border-right: 1px solid var(--g100); }
.mk-ad .ls .sch{ min-width: 0; margin: 0 0 .6em; }
.mk-ad .th{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3em .6em; padding: .8em; border-radius: 1em; }
.mk-ad .th .av{ grid-row: span 2; }
.mk-ad .th b{ overflow: hidden; font: 650 1.05em/1.1 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.mk-ad .th small{ grid-column: 2 / -1; overflow: hidden; color: var(--g500); font: 500 .95em/1.25 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.mk-ad .th.on{ background: var(--blush-50); box-shadow: inset 0 0 0 1px rgba(90, 15, 46, .12); }
.mk-ad .cvs{ min-width: 0; display: flex; flex-direction: column; gap: .9em; padding: 1.3em 1.4em; background: var(--g50); }
.mk-ad .ch{ display: flex; align-items: center; gap: .6em; padding-bottom: .9em; border-bottom: 1px solid var(--g100); white-space: nowrap; }
.mk-ad .ch b{ font: 700 1.2em/1 var(--f-sans); }
.mk-ad .ch small{ color: var(--g500); font: 500 .95em/1 var(--f-sans); }
.mk-ad .msg{ max-width: 86%; padding: .8em 1em; border-radius: 1.1em 1.1em 1.1em .35em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); font: 500 1.05em/1.35 var(--f-sans); }
.mk-ad .msg.me{ align-self: flex-end; border-radius: 1.1em 1.1em .35em 1.1em; background: var(--burgundy); color: var(--white); box-shadow: none; }
.mk-ad .rb{ display: flex; align-items: center; gap: .6em; margin-top: auto; padding: .55em .55em .55em 1em; border-radius: 1.1em; background: var(--white); box-shadow: 0 0 0 1px var(--g200); color: var(--g400); font: 500 1em/1 var(--f-sans); }
.mk-ad .rb span{ flex: 1; }
.mk-ad .rb i{ display: inline-flex; align-items: center; gap: .4em; padding: .6em .9em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 600 .95em/1 var(--f-sans); font-style: normal; }
.mk-ad .rb .ico{ width: 1.1em; height: 1.1em; }
.mk-ad .sd{ display: flex; flex-direction: column; gap: .8em; min-width: 0; padding: 1.3em 1.1em; }
.mk-ad .sd .cd{ display: grid; justify-items: start; gap: .45em; padding: .9em 1em; border-radius: 1em; box-shadow: 0 0 0 1px var(--g100); }
.mk-ad .sd small{ color: var(--g500); font: 500 .85em/1 var(--f-mono); }
.mk-ad .sd b{ font: 700 1.1em/1.15 var(--f-sans); }
.mk-ad .sd .dl{ display: inline-flex; align-items: center; gap: .35em; color: var(--green); font: 600 .95em/1 var(--f-sans); }
.mk-ad .sd .dl svg, .mk-ad .au svg{ width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk-ad .sd .lng{ color: var(--g600); font: 500 .95em/1.2 var(--f-sans); }
.mk-ad .tabs{ display: flex; gap: .25em; padding: .25em; border-radius: .8em; background: var(--g50); box-shadow: inset 0 0 0 1px var(--g100); }
.mk-ad .tabs i{ padding: .45em .8em; border-radius: .6em; color: var(--g500); font: 600 .95em/1 var(--f-mono); font-style: normal; }
.mk-ad .tabs i.on{ background: var(--white); color: var(--burgundy); box-shadow: 0 .1em .3em rgba(0, 0, 0, .1); }
.mk-ad .cp{ flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 18em; gap: 1.8em; }
.mk-ad .fm{ display: flex; flex-direction: column; min-width: 0; }
.mk-ad .fm label{ margin: .9em 0 .45em; color: var(--g500); font: 600 .9em/1 var(--f-mono); }
.mk-ad .fm label:first-child{ margin-top: 0; }
.mk-ad .in{ padding: .75em .9em; border-radius: .8em; box-shadow: inset 0 0 0 1px var(--g200); font: 500 1.05em/1.35 var(--f-sans); }
.mk-ad .in.ta{ min-height: 4.6em; background: var(--blush-50); box-shadow: inset 0 0 0 .14em var(--burgundy-600); }
.mk-ad .in.ta span::after{ content: ""; display: inline-block; width: .1em; height: 1.1em; margin-left: .1em; vertical-align: -.15em; background: var(--burgundy); animation: mk-caret 1s steps(1) infinite; }
.mk-ad .au{ display: flex; flex-wrap: wrap; gap: .45em; }
.mk-ad .au span{ display: inline-flex; align-items: center; gap: .3em; padding: .55em .85em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--g200); color: var(--g600); font: 600 .95em/1 var(--f-sans); }
.mk-ad .au span.on{ background: var(--burgundy); color: var(--white); box-shadow: none; }
.mk-ad .go{ display: inline-flex; align-self: flex-start; align-items: center; gap: .5em; margin-top: auto; padding: .8em 1.3em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 700 1.05em/1 var(--f-sans); }
.mk-ad .go .ico{ width: 1.15em; height: 1.15em; }
.mk-ad .prv{ display: flex; flex-direction: column; gap: .6em; min-width: 0; }
.mk-ad .prv > small{ color: var(--g500); font: 600 .9em/1 var(--f-mono); }
.mk-ad .ph9{ flex: 1; min-height: 0; padding: 2em 1.1em 1em; overflow: hidden; border-radius: 2.4em 2.4em 0 0; background: linear-gradient(170deg, #4A2335, var(--burgundy-900) 45%, var(--g950)); box-shadow: inset 0 0 0 .45em var(--black); color: var(--white); text-align: center; }
.mk-ad .ls9 b{ display: block; font: 600 3.4em/1 var(--f-sans); letter-spacing: -.02em; }
.mk-ad .ls9 span{ display: block; margin-top: .35em; color: rgba(255, 255, 255, .75); font: 500 .95em/1 var(--f-sans); }
.mk-ad .nt{ display: flex; gap: .7em; margin-top: 1.8em; padding: .9em; border-radius: 1.2em; background: rgba(255, 255, 255, .9); color: var(--black); text-align: left; box-shadow: 0 .6em 1.6em -.6em rgba(0, 0, 0, .5); }
.mk-ad .nt > i{ flex: none; width: 2.4em; height: 2.4em; border-radius: .6em; background: linear-gradient(140deg, var(--cherry), var(--burgundy)); }
.mk-ad .nt > span{ min-width: 0; display: grid; gap: .25em; }
.mk-ad .nt b{ color: var(--g600); font: 600 .78em/1 var(--f-sans); letter-spacing: .05em; text-transform: uppercase; }
.mk-ad .nt strong{ font: 700 1em/1.2 var(--f-sans); }
.mk-ad .nt em{ color: var(--g800); font: 500 .92em/1.3 var(--f-sans); font-style: normal; }
.mk-ad .cht{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mk-ad .lg9{ display: inline-flex; align-items: center; gap: .4em; }
.mk-ad .lg9 i{ width: 1.2em; height: .25em; margin-left: .6em; border-radius: 99em; background: var(--cherry); }
.mk-ad .lg9 i.old{ background: var(--g300); }
.mk-ad .pl9{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mk-ad .pl9 svg{ flex: 1; min-height: 0; width: 100%; }
.mk-ad .pl9 .gl{ stroke: var(--g100); stroke-width: 1; }
.mk-ad .pl9 .old{ fill: none; stroke: var(--g300); stroke-width: 2; stroke-dasharray: 5 5; }
.mk-ad .pl9 .ar{ fill: rgba(200, 16, 46, .08); }
.mk-ad .pl9 .ln9{ fill: none; stroke: var(--cherry); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; animation: m9-line 4.8s var(--ease-io) infinite; }
.mk-ad .xs{ display: flex; justify-content: space-between; padding-top: .5em; color: var(--g400); font: 500 .85em/1 var(--f-mono); }
.mk-bk{ position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4.6em 1.5em 0; background: var(--g50); color: var(--black); font-family: var(--f-sans); }
.mk-bk .tp{ display: flex; align-items: center; gap: .8em; }
.mk-bk .tp h4{ flex: 1; margin: 0; font: 900 2.3em/1.05 var(--f-display); letter-spacing: -.01em; }
.mk-bk .bt{ flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--g100); color: var(--g800); }
.mk-bk .bt .ico{ width: 1.6em; height: 1.6em; }
.mk-bk .bal{ position: relative; margin-top: 1.4em; padding: 1.4em 1.5em; overflow: hidden; border-radius: 1.8em; background: linear-gradient(150deg, var(--g800), var(--g975) 70%); color: var(--white); }
.mk-bk .bal::after{ content: ""; position: absolute; right: -4em; top: -5.5em; width: 13em; height: 13em; border-radius: 50%; box-shadow: inset 0 0 0 1.4em rgba(255, 255, 255, .045), 0 0 0 1.4em rgba(255, 255, 255, .03); }
.mk-bk .bal small{ color: var(--g300); font: 500 1.05em/1 var(--f-sans); }
.mk-bk .bal > b{ display: block; margin-top: .3em; font: 900 2.7em/1 var(--f-display); letter-spacing: -.01em; }
.mk-bk .bal > span{ display: block; margin-top: .4em; color: var(--g400); font: 500 1em/1 var(--f-sans); }
.mk-bk .bal > em{ display: inline-block; margin-top: 1em; padding: .45em .75em; border-radius: 99em; background: rgba(255, 255, 255, .1); color: var(--g200); font: 500 .95em/1 var(--f-mono); font-style: normal; }
.mk-bk .two9{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; margin-top: 1.1em; }
.mk-bk .two9 span{ padding: .7em .8em; border-radius: 1em; background: rgba(255, 255, 255, .08); font: 700 1.15em/1 var(--f-sans); white-space: nowrap; }
.mk-bk .two9 small{ display: block; margin-bottom: .35em; color: var(--g400); font: 500 .85em/1 var(--f-sans); }
.mk-bk .qa{ display: flex; justify-content: space-between; margin-top: 1.4em; }
.mk-bk .qa span{ display: flex; flex-direction: column; align-items: center; gap: .45em; color: var(--g800); font: 600 1em/1 var(--f-sans); }
.mk-bk .qa i{ display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--g100), 0 .3em .8em -.4em rgba(0, 0, 0, .15); color: var(--burgundy); }
.mk-bk .qa .ico{ width: 1.7em; height: 1.7em; }
.mk-bk .wk, .mk-bk .ls, .mk-bk .spd{ margin-top: 1.3em; padding: 1.2em 1.3em; border-radius: 1.6em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); }
.mk-bk .lh{ display: flex; align-items: baseline; justify-content: space-between; }
.mk-bk .lh b{ font: 800 1.35em/1 var(--f-display); }
.mk-bk .lh small{ color: var(--g500); font: 500 1em/1 var(--f-sans); }
.mk-bk .bars9{ display: flex; gap: .7em; height: 9em; margin-top: 1em; }
.mk-bk .bars9 span{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: .45em; color: var(--g400); font: 600 .9em/1 var(--f-mono); }
.mk-bk .bars9 span > i{ flex: 1; display: flex; align-items: flex-end; width: 100%; }
.mk-bk .bars9 b{ width: 100%; border-radius: .5em .5em .2em .2em; background: var(--g200); transform-origin: bottom; animation: m9-bar 4.8s var(--ease-io) infinite; }
.mk-bk .bars9 b.on{ background: var(--burgundy); }
.mk-bk .acs{ display: flex; gap: .5em; margin-top: 1.1em; }
.mk-bk .acs span{ display: grid; place-items: center; padding: .65em 1.1em; border-radius: 99em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); color: var(--g600); font: 600 1.05em/1 var(--f-sans); }
.mk-bk .acs span.on{ background: var(--black); color: var(--white); box-shadow: none; }
.mk-bk .acs .ico{ width: 1.1em; height: 1.1em; }
.mk-bk .tx{ display: flex; align-items: center; gap: .9em; padding: .85em 0; border-top: 1px solid var(--g100); }
.mk-bk .lh + .tx{ margin-top: .8em; border-top: 0; }
.mk-bk .tx > i{ flex: none; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 1em; color: var(--g800); }
.mk-bk .tx > i .ico{ width: 1.5em; height: 1.5em; }
.mk-bk .tx > span{ flex: 1; min-width: 0; }
.mk-bk .tx b{ display: block; font: 650 1.2em/1.15 var(--f-sans); }
.mk-bk .tx small{ display: block; margin-top: .3em; color: var(--g500); font: 500 .95em/1 var(--f-sans); }
.mk-bk .tx em{ font: 700 1.15em/1 var(--f-sans); font-style: normal; white-space: nowrap; }
.mk-bk .tx em.in{ color: var(--green); }
.mk-bk .stp{ display: flex; align-items: center; gap: .6em; margin-top: 1.3em; }
.mk-bk .stp span{ display: inline-flex; align-items: center; gap: .4em; color: var(--g500); font: 600 1.05em/1 var(--f-sans); }
.mk-bk .stp svg{ width: 1.6em; height: 1.6em; padding: .3em; border-radius: 50%; background: var(--green); fill: none; stroke: var(--white); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-bk .stp span.on{ color: var(--black); }
.mk-bk .stp span.on b{ display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--burgundy); color: var(--white); font: 700 .9em/1 var(--f-sans); }
.mk-bk .stp > i{ flex: 1; height: 2px; background: var(--g200); }
.mk-bk .ac{ margin-top: 1.1em; }
.mk-bk .ac small, .mk-bk .amt small{ color: var(--g500); font: 600 .95em/1 var(--f-mono); }
.mk-bk .ac > span{ display: flex; align-items: center; gap: .8em; margin-top: .5em; padding: .9em 1em; border-radius: 1.3em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); }
.mk-bk .ac i{ display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .8em; background: var(--g100); color: var(--g800); }
.mk-bk .ac .ico{ width: 1.4em; height: 1.4em; }
.mk-bk .ac b{ flex: 1; font: 650 1.15em/1.1 var(--f-sans); }
.mk-bk .ac em{ color: var(--g500); font: 500 .95em/1 var(--f-mono); font-style: normal; }
.mk-bk .amt{ margin-top: 1.3em; text-align: center; }
.mk-bk .amt b{ display: block; margin-top: .25em; font: 900 3.4em/1 var(--f-display); letter-spacing: -.02em; }
.mk-bk-pay::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(27, 27, 29, .16); }
.mk-bk .sheet{ position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: .6em; padding: 1em 1.6em 2.6em; border-radius: 2.2em 2.2em 0 0; background: var(--white); box-shadow: 0 -1em 3em rgba(42, 7, 20, .16); }
.mk-bk .sheet .hd9{ justify-self: center; width: 4em; height: .5em; border-radius: 99em; background: var(--g200); }
.mk-bk .sheet > b{ margin-top: .2em; font: 900 1.8em/1 var(--f-display); }
.mk-bk .kv{ display: flex; justify-content: space-between; padding: .55em 0; border-bottom: 1px solid var(--g100); color: var(--g600); font: 500 1.1em/1 var(--f-sans); }
.mk-bk .kv span:last-child{ color: var(--black); font-weight: 650; }
.mk-bk .sheet .go{ display: flex; align-items: center; justify-content: center; gap: .5em; height: 3.4em; margin-top: .5em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 700 1.3em/1 var(--f-sans); }
.mk-bk .sheet .go .ico{ width: 1.1em; height: 1.1em; }
.mk-bk .cf{ position: relative; display: flex; flex-direction: column; aspect-ratio: 1.586; margin-top: 1.4em; padding: 1.4em 1.5em; overflow: hidden; border-radius: 1.5em; background: linear-gradient(135deg, var(--g800), var(--g975)); color: var(--white); box-shadow: 0 1.2em 2.4em -1.2em rgba(0, 0, 0, .5); }
.mk-bk .cf::before{ content: ""; position: absolute; right: -6em; bottom: -8em; width: 17em; height: 17em; border-radius: 50%; box-shadow: inset 0 0 0 1.3em rgba(255, 255, 255, .05); }
.mk-bk .chip9{ width: 3.4em; height: 2.6em; border-radius: .5em; background: linear-gradient(135deg, var(--amber-300), var(--amber-500)); }
.mk-bk .nb{ margin-top: auto; font: 500 1.3em/1 var(--f-mono); letter-spacing: .06em; white-space: nowrap; }
.mk-bk .ex{ display: flex; align-items: baseline; justify-content: space-between; margin-top: .9em; }
.mk-bk .ex small{ color: var(--g400); font: 500 .95em/1 var(--f-sans); }
.mk-bk .ex b{ font: 600 1em/1 var(--f-mono); }
.mk-bk .dots9{ display: flex; justify-content: center; gap: .4em; margin-top: .9em; }
.mk-bk .dots9 i{ width: .6em; height: .6em; border-radius: 50%; background: var(--g300); }
.mk-bk .dots9 i.on{ width: 1.6em; border-radius: 99em; background: var(--black); }
.mk-bk .spd .sum{ display: block; margin-top: .3em; font: 900 2.3em/1 var(--f-display); }
.mk-bk .seg9{ display: flex; gap: .25em; height: .9em; margin-top: .9em; }
.mk-bk .seg9 i{ border-radius: 99em; }
.mk-bk .lg9{ display: flex; gap: 1em; margin-top: .8em; color: var(--g600); font: 500 .95em/1 var(--f-sans); }
.mk-bk .lg9 span{ display: inline-flex; align-items: center; gap: .35em; }
.mk-bk .lg9 i{ width: .7em; height: .7em; border-radius: 50%; }
.mk-bk .cts{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; margin-top: 1.3em; }
.mk-bk .ct{ display: flex; flex-direction: column; align-items: center; gap: .45em; color: var(--g800); font: 600 .95em/1 var(--f-sans); }
.mk-bk .ct i{ display: grid; place-items: center; width: 4.2em; height: 4.2em; border-radius: 1.3em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); color: var(--g800); }
.mk-bk .ct .ico{ width: 1.6em; height: 1.6em; }
.mk-bk .ct.on i{ background: var(--burgundy); color: var(--white); box-shadow: none; }
@keyframes m9-paint{ 0%, 6% { stroke-dashoffset: 1; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes m9-trail{ 0%, 8% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes m9-line{ 0%, 5% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes m9-bar{ 0%, 8% { transform: scaleY(.1); } 40%, 100% { transform: none; } }
@keyframes m9-heat{ 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.82); opacity: .75; } }
@media (prefers-reduced-motion: reduce){.mk-ma-c .art .brush, .mk-ma-t .road-dn, .mk-ad .pl9 .ln9, .mk-bk .bars9 b, .mk-cy .ht{ animation: none !important; }}
.cl-print{ position: absolute; z-index: 0; left: 0; top: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.cl-print .tr{ fill: none; stroke: var(--white); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; }
.cl-print .via{ fill: none; stroke: var(--white); }
.cl-print .pad{ fill: var(--white); }
.cl-print .b0{ opacity: .1; }
.cl-print .b1{ opacity: .18; }
.cl-print .b2{ opacity: .27; }
.cl-print .pk{ fill: none; stroke: var(--white); stroke-linecap: round; stroke-dasharray: var(--a) 2; stroke-dashoffset: var(--a); opacity: 0; }
.cl-print.live .pk{ opacity: .95; animation: cl-pk var(--d) linear var(--dl) infinite; }
@keyframes cl-pk{ from { stroke-dashoffset: var(--a); } to { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce){.cl-print.live .pk{ animation: none; opacity: 0; }}
.dir-b, .dir-b .t-dark{
  --page: #000; --ink: #FFF; --mut: #A0A0A7; --dim: #85858C; --ln: #2E2E31;   
  --s1: #0F0F12; --s2: #1B1B1D; --card: #1B1B1D; --e1: #1B1B1D; --e2: #2E2E31; --e3: #404046; --node: #55555C;
  --hi: var(--burgundy-300); --sub: var(--amber-300); --ok: var(--green-300); --ok-bg: rgba(170, 208, 183, .14); --tint: rgba(227, 172, 189, .12);
  --btn: var(--white); --btn-ink: var(--black); --btn-hov: var(--blush); --btn-hov-ink: var(--black); --focus: var(--burgundy-300);
  --spot: rgba(227, 172, 189, .07); --spot-dot: #3A3A40; --glow-a: rgba(156, 61, 96, .34); --glow-b: rgba(90, 15, 46, .12);
  --ly-sh: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 70px -40px rgba(0, 0, 0, .85); --lbl-ln: #55555C; --sw-ring: rgba(255, 255, 255, .25);
  color-scheme: dark;
}
.dir-b{ color: var(--ink); }
html[data-theme="light"] .dir-b{
  --page: #FFF; --ink: #000; --mut: #55555C; --dim: #6B6B73; --ln: #E4E4E8;   
  --s1: #F6F6F8; --s2: #EBEBED; --card: #FFF; --e1: #EBEBED; --e2: #DCDCE0; --e3: #BEBEC3; --node: #BEBEC3;
  --hi: var(--burgundy); --sub: var(--burgundy); --ok: var(--green); --ok-bg: rgba(31, 122, 76, .1); --tint: rgba(90, 15, 46, .07);
  --btn: var(--black); --btn-ink: var(--white); --btn-hov: var(--burgundy); --btn-hov-ink: var(--white); --focus: var(--burgundy-600);
  --spot: rgba(156, 61, 96, .05); --spot-dot: rgba(156, 61, 96, .55); --glow-a: rgba(240, 207, 217, .6); --glow-b: rgba(248, 230, 236, .35);
  --ly-sh: inset 0 0 0 1px rgba(0, 0, 0, .07), 0 40px 70px -40px rgba(42, 7, 20, .42); --lbl-ln: #A0A0A7; --sw-ring: rgba(0, 0, 0, .2);
  color-scheme: light;
}
.dir-b{ --cl: max(176px, calc(50vw - 544px)); --rail: calc(var(--cl) - 128px); background: var(--page); }
.dir-b .wrap{ width: min(1200px, calc(100% - var(--cl) - 64px)); margin-left: var(--cl); }
.dir-b ::selection{ background: var(--burgundy-600); color: var(--white); }
.dir-b :focus-visible{ outline-color: var(--focus); }
.skip{ position: fixed; z-index: 100; left: 16px; top: -60px; padding: 12px 16px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font: 600 14px/1 var(--f-sans); text-decoration: none; }
.skip:focus{ top: 16px; }
#main{ position: relative; z-index: 1; outline: none; }
code, .mono{ font-family: var(--f-mono); }
.b-caret{ display: inline-block; width: .55em; height: 1.1em; margin-left: .1em; vertical-align: -.18em; background: var(--ink); animation: b-blink 1.05s steps(1) infinite; }
@keyframes b-blink{ 50% { opacity: 0; } }
.b-btn{ display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 99px; background: var(--btn); color: var(--btn-ink); font: 600 16px/1 var(--f-sans); text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s, box-shadow .25s; }
.b-btn .ico{ transition: transform .35s var(--ease); }
.b-btn:hover{ background: var(--btn-hov); color: var(--btn-hov-ink); }
.b-btn:hover .ico{ transform: translateX(3px); }
.b-btn.burg{ background: var(--burgundy); color: var(--white); }
.b-btn.burg:hover{ background: var(--burgundy-700); color: var(--white); }
.b-link{ display: inline-flex; align-items: center; gap: 8px; color: var(--hi); font: 500 15px/1 var(--f-mono); text-decoration: none; }
.b-link .ico{ transition: transform .35s var(--ease); }
.b-link:hover .ico{ transform: translateX(4px); }
.lang{ display: flex; padding: 3px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--e3); }
.lang button{ padding: 6px 10px; border: 0; border-radius: 99px; background: none; color: inherit; font: 600 12px/1 var(--f-mono); cursor: pointer; opacity: .55; transition: opacity .2s, background-color .2s; }
.lang button[aria-pressed="true"]{ opacity: 1; background: var(--e2); }
.dir-b .lang{ display: none; }
.b-nav{ position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 76px; transition: background-color .35s, box-shadow .35s; }
.b-nav .wrap{ display: flex; align-items: center; gap: 32px; height: 100%; }
.b-nav.solid{ background: color-mix(in srgb, var(--page) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--e1); }
.b-brand{ display: block; color: var(--ink); }
.b-brand svg{ display: block; width: auto; height: 19px; }
.b-links{ display: none; }
.b-nav-cta{ margin-left: auto; }
.b-nav .b-btn{ height: 42px; padding: 0 18px; font-size: 14px; }
.b-spot{ position: fixed; z-index: 0; inset: 0; pointer-events: none; --mx: -999px; --my: -999px;
  background: radial-gradient(560px circle at var(--mx) var(--my), var(--spot), transparent 60%); }
.b-spot i{ position: absolute; inset: 0; background: radial-gradient(circle, var(--spot-dot) 1px, transparent 1.4px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(380px circle at var(--mx) var(--my), #000, transparent 75%); mask-image: radial-gradient(380px circle at var(--mx) var(--my), #000, transparent 75%); }
.b-bg{ position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.b-bg canvas{ position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
html[data-theme="light"][data-bg="halftone"] .b-bg canvas{ display: block; }
html[data-theme="light"][data-bg="dots"] .b-bg, html[data-theme="light"][data-bg="grid"] .b-bg, html[data-theme="light"][data-bg="crosses"] .b-bg, html[data-theme="light"][data-bg="blush"] .b-bg{
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 44%, #000 30%, transparent 88%); mask-image: radial-gradient(ellipse 78% 72% at 50% 44%, #000 30%, transparent 88%); }
@keyframes b-drift-a{ to { transform: translate(24vmax, 16vmax) scale(1.08); } }
@keyframes b-drift-b{ to { transform: translate(-20vmax, -14vmax) scale(.94); } }
html[data-theme="light"][data-bg="dots"] .b-bg{ background: radial-gradient(circle, rgba(0, 0, 0, .2) 1px, transparent 1.5px) 0 0 / 28px 28px; }
html[data-theme="light"][data-bg="grid"] .b-bg{ background-image: linear-gradient(rgba(0, 0, 0, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .055) 1px, transparent 1px);
  background-size: 28px 28px; background-position: 13.5px 13.5px; }
html[data-theme="light"][data-bg="crosses"] .b-bg{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28.5 23.5v10M23.5 28.5h10' stroke='%23000' stroke-opacity='.26'/%3E%3C/svg%3E") -14px -14px / 56px 56px; }
html[data-theme="light"][data-bg="blush"] .dir-b{ --page: var(--blush-50); }
html[data-theme="light"][data-bg="blush"] .b-bg{ background: radial-gradient(circle, rgba(90, 15, 46, .2) 1px, transparent 1.5px) 0 0 / 28px 28px; }
@media (prefers-reduced-motion: reduce){.b-bg::before, .b-bg::after{ animation: none !important; }}
.b-rail{ --lbl: 1; position: fixed; z-index: 50; top: 104px; bottom: 36px; left: var(--rail); width: 120px; pointer-events: none; }
.b-rail-top{ position: absolute; left: -2px; top: -26px; color: var(--dim); font: 500 12px/1 var(--f-mono); }
.b-rail-line, .b-rail-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ln); }
.b-rail-fill{ bottom: auto; height: 0; background: var(--hi); }
.b-rail-nodes{ position: absolute; inset: 0; }
.b-rail-nodes button{ position: absolute; left: -7px; width: 14px; height: 14px; margin-top: -7px; padding: 0; border: 0; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 2px var(--node); color: var(--dim); cursor: pointer; pointer-events: auto; transition: box-shadow .3s, background-color .3s, color .25s; }
.b-rail-nodes button.on{ background: var(--hi); box-shadow: none; }
.b-rail-nodes button span{ position: absolute; left: 16px; top: 50%; padding: 5px 8px; border-radius: 7px; background: color-mix(in srgb, var(--page) 88%, transparent); color: inherit; font: 500 13px/1 var(--f-sans); white-space: nowrap; transform: translateY(calc(-50% + var(--dy, 0px))); opacity: var(--lbl); transition: color .25s; }
.b-rail-nodes button:hover, .b-rail-nodes button:focus-visible, .b-rail-nodes button.cur{ color: var(--ink); }
.b-rail-nodes button.cur span{ font-weight: 650; }
.b-head{ position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); will-change: transform; pointer-events: none; }
.b-head b{ width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--cherry); box-shadow: 0 0 0 4px rgba(200, 16, 46, .25), 0 0 18px rgba(200, 16, 46, .7); }
.b-head em, .b-head .msg{ display: none; }
.b-hero{ position: relative; min-height: 100vh; display: flex; align-items: center; padding: 104px 0 64px; overflow-x: clip; }
.b-hero-in{ display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.b-story{ position: relative; z-index: 2; container-type: inline-size; }
.b-hero h1{ margin: 0; font: 900 clamp(44px, 9.2cqw, 84px)/.98 var(--f-display); letter-spacing: -.02em; }
.dir-b .w{ display: inline-block; white-space: nowrap; }
.b-ch{ display: inline-block; text-align: center; font-weight: 900; }
.b-hero-sub{ margin: 26px 0 40px; color: var(--sub); font: 900 clamp(22px, 4.2cqw, 34px)/1.25 var(--f-display); letter-spacing: -.01em; }
.b-scaret{ width: .5em; height: .9em; margin-left: .14em; vertical-align: -.1em; background: var(--sub); }
.b-hero-sub:has(.b-tcaret){ position: relative; }
.b-hero-sub .b-tcaret{ position: absolute; left: 0; top: 0; margin: 0; animation: none; }
.b-hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; }
.b-btn .ico.dn{ transform: rotate(90deg); }
.b-btn:hover .ico.dn{ transform: rotate(90deg) translateX(3px); }
.b-layer{ position: absolute; z-index: 4; top: 50%; right: max(24px, calc(100% - var(--cl) - min(1200px, 100% - var(--cl) - 64px))); width: min(440px, 30vw); transform: translateY(-50%); visibility: hidden; opacity: 0; }
.b-layer .nm{ display: block; color: var(--hi); font: 900 clamp(34px, 3.6vw, 56px)/1 var(--f-display); letter-spacing: -.02em; }
.b-layer .ln{ margin: 18px 0 0; color: var(--mut); font: 400 20px/1.5 var(--f-sans); text-wrap: pretty; }
.b-layer-x{ margin-top: 28px; padding: 0; border: 0; background: none; color: var(--dim); font: 500 13px/1 var(--f-mono); cursor: pointer; transition: color .2s; }
.b-layer-x:hover{ color: var(--ink); }
.b-term-bar{ display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid #1B1B1D; color: var(--dim); font: 500 12px/1 var(--f-mono); }
.b-term-bar i{ width: 11px; height: 11px; border-radius: 50%; background: #2E2E31; }
.b-term-bar span{ margin-left: 10px; }
.b-xcol{ position: relative; }
.b-x{ position: relative; height: min(660px, 74vh); }
.b-x-glow{ position: absolute; left: 50%; top: 50%; width: 660px; height: 660px; margin: -330px 0 0 -330px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-a), var(--glow-b) 55%, transparent); pointer-events: none; }
html[data-theme="light"] .b-x-glow, html[data-theme="light"] .b-spot{ display: none; }
.b-x-stage{ position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 2200px; }
.b-x-obj{ position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.b-x-stack{ --pw: min(290px, 31vh); --ph: calc(var(--pw) * 620 / 300); position: absolute; left: calc(var(--pw) / -2); top: calc(var(--ph) / -2); width: var(--pw); height: var(--ph); transform-style: preserve-3d; }
.b-ly{ position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--pw) * .155); font-size: calc(var(--pw) / 30); }
.b-ly.top{ overflow: visible; }
.b-ly.top .dev-phone{ --w: var(--pw); }
.b-ly .anc{ position: absolute; left: 0; top: 50%; width: 1px; height: 1px; }
.b-ly:not(.top){ box-shadow: var(--ly-sh); }
.ly-copy{ background: var(--blush-50); }
.ly-copy b{ position: absolute; left: .9em; top: -.4em; color: var(--burgundy); font: 900 11em/1 var(--f-display); }
.ly-copy .ln{ position: absolute; left: 2.2em; height: 1.1em; border-radius: .4em; background: var(--g200); }
.ly-copy .ln.sel{ background: var(--burgundy-200); }
.ly-copy .car{ position: absolute; width: .3em; height: 1.9em; margin-left: .3em; background: var(--cherry); }
.ly-brand{ background: var(--burgundy); }
.ly-brand .mk{ position: absolute; left: 50%; top: 19%; width: 11em; height: 11em; margin-left: -5.5em; border-radius: 3.2em; background: linear-gradient(140deg, var(--cherry), var(--burgundy-700)); box-shadow: 0 1.4em 3em -1em rgba(0, 0, 0, .45); }
.ly-brand .sw{ position: absolute; left: 0; right: 0; top: 54%; display: flex; justify-content: center; gap: 1.1em; }
.ly-brand .sw i{ width: 3.3em; height: 3.3em; border-radius: 50%; box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .25); }
.ly-brand .sw i:nth-child(1){ background: var(--cherry); }
.ly-brand .sw i:nth-child(2){ background: var(--blush); }
.ly-brand .sw i:nth-child(3){ background: var(--amber-300); }
.ly-brand .sw i:nth-child(4){ background: var(--white); }
.ly-brand b{ position: absolute; left: 1.6em; bottom: 7%; color: var(--white); font: 900 7.5em/1 var(--f-display); letter-spacing: -.03em; }
.ly-code{ background: #0F0F12; }
.ly-code pre{ margin: 0; padding: 4.2em 1.8em; color: var(--g300); font: 500 1.2em/1.9 var(--f-mono); white-space: pre; }
.ly-code .k{ color: var(--burgundy-300); }
.ly-code .s{ color: var(--green-300); }
.ly-int{ background: #1B1B1D; }
.ly-int svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.ly-int .ln{ fill: none; stroke: #404046; stroke-width: 2.5; }
.ly-int .nd{ fill: #1B1B1D; stroke: var(--burgundy-300); stroke-width: 3; }
.ly-int .hub{ fill: var(--burgundy-600); }
.ly-data{ background: var(--g200); }
.ly-data .db{ position: absolute; left: 50%; top: 12%; width: 8.5em; margin-left: -4.25em; fill: var(--white); stroke: var(--g400); stroke-width: 1.6; stroke-linejoin: round; }
.ly-data .db path:last-child{ fill: none; }
.ly-data .rows{ position: absolute; left: 1.8em; right: 1.8em; top: 45%; display: grid; gap: 1em; }
.ly-data .rows i{ position: relative; height: 4.2em; border-radius: 1.2em; background: var(--white); }
.ly-data .rows i::before{ content: ""; position: absolute; left: 1.3em; top: 50%; width: 1.1em; height: 1.1em; margin-top: -.55em; border-radius: 50%; background: var(--green-300); }
.ly-data .rows i:nth-child(3)::before{ background: var(--amber-300); }
.ly-data .rows i::after{ content: ""; position: absolute; left: 3.4em; right: 32%; top: 50%; height: .8em; margin-top: -.4em; border-radius: .3em; background: var(--g200); }
.ly-launch{ background: linear-gradient(160deg, var(--amber-300), var(--amber-500) 55%, #8B5200); }
.ly-launch .vids{ position: absolute; left: 10%; right: 10%; top: 14%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.ly-launch .vids i{ position: relative; aspect-ratio: 9 / 16; border-radius: 1em; background: rgba(255, 255, 255, .9); }
.ly-launch .vids i::after{ content: ""; position: absolute; left: 50%; top: 50%; margin: -.9em 0 0 -.5em; border: .9em solid transparent; border-left: 1.4em solid var(--burgundy); border-right: 0; }
.ly-launch .store{ position: absolute; left: 20%; right: 20%; bottom: 14%; height: 4.4em; border-radius: 1.2em; background: var(--black); }
.b-x-labels{ position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.b-x-labels svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b-x-labels path{ fill: none; stroke: var(--lbl-ln); stroke-width: 1.5; }
.b-x-labels circle{ fill: var(--ink); }
.b-lbl{ position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; opacity: 0; }
.b-lbl i{ width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px var(--sw-ring); }
.b-lbl b{ font: 800 28px/1 var(--f-display); letter-spacing: -.01em; }
.b-lbl{ padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
html.exploring .b-lbl{ pointer-events: auto; cursor: pointer; }
html.exploring .b-lbl b{ transition: color .2s; }
html.exploring .b-lbl:not(.on) b{ color: var(--dim); }
html.exploring .b-lbl.on b{ color: var(--hi); }
html.exploring .b-ly{ cursor: pointer; transition: filter .25s; }
html.exploring .b-ly:not(.on){ filter: saturate(.15) brightness(1.06) opacity(.8); }
.b-xacts{ position: absolute; left: 50%; bottom: -22px; display: flex; align-items: center; gap: 6px; white-space: nowrap; transform: translateX(-50%); }
.b-look{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 99px; background: var(--btn); color: var(--btn-ink); font: 600 13px/1 var(--f-sans); cursor: pointer; transition: background-color .25s, color .25s; }
.b-look:hover{ background: var(--btn-hov); color: var(--btn-hov-ink); }
.b-look .ico{ width: 15px; height: 15px; }
html:not([data-theme="light"]) .b-look{ display: none; }
.b-replay{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 99px; background: transparent; color: var(--dim); font: 500 12px/1 var(--f-mono); cursor: pointer; transition: color .2s; }
.b-replay:hover{ color: var(--ink); }
.b-replay .ico{ width: 14px; height: 14px; }
.mk-fr{ position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4.6em 1.6em 0; background: linear-gradient(180deg, var(--blush-50), var(--white) 32%); color: var(--black); font-family: var(--f-sans); }
.fr-top{ display: flex; align-items: center; gap: .8em; }
.fr-logo{ flex: none; width: 2.8em; height: 2.8em; border-radius: .9em; background: linear-gradient(140deg, var(--cherry), var(--burgundy)); }
.fr-top b{ flex: 1; font: 900 1.6em/1 var(--f-display); }
.fr-av{ display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--amber-300); font: 800 1.2em/1 var(--f-display); }
.fr-hi{ margin: 1.3em 0 0; font: 900 2.4em/1.05 var(--f-display); letter-spacing: -.01em; }
.fr-card{ display: flex; align-items: center; gap: 1em; margin-top: 1.2em; padding: 1.4em; border-radius: 1.8em; background: var(--burgundy); color: var(--white); }
.fr-card > div{ flex: 1; }
.fr-card small{ color: var(--burgundy-200); font: 500 1.05em/1 var(--f-sans); }
.fr-card b{ display: block; margin-top: .3em; font: 900 1.8em/1.05 var(--f-display); }
.fr-bar{ display: block; height: .6em; margin-top: .9em; overflow: hidden; border-radius: 99em; background: rgba(255, 255, 255, .2); }
.fr-bar i{ display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--white); }
.fr-ring{ flex: none; width: 5.2em; height: 5.2em; transform: rotate(-90deg); }
.fr-ring circle{ fill: none; stroke-width: 5; }
.fr-ring .t{ stroke: rgba(255, 255, 255, .2); }
.fr-ring .v{ stroke: var(--amber-300); stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: .28; }
.fr-chips{ display: flex; gap: .6em; margin-top: 1.4em; }
.fr-chips span{ padding: .6em 1em; border-radius: 99em; background: var(--g100); color: var(--g600); font: 600 1.05em/1 var(--f-sans); }
.fr-chips span.on{ background: var(--black); color: var(--white); }
.fr-list{ position: relative; margin: .9em -.4em 0; padding: .4em; overflow: hidden; }
.fr-la, .fr-lb{ display: grid; gap: .9em; }
.fr-lb{ position: absolute; left: .4em; right: .4em; top: .4em; opacity: 0; }
.fr-list .it{ display: flex; align-items: center; gap: 1em; padding: .9em; border-radius: 1.3em; background: var(--white); box-shadow: 0 .2em .8em rgba(42, 7, 20, .07), 0 0 0 1px rgba(90, 15, 46, .05); }
.fr-list .sw{ flex: none; width: 3.6em; height: 3.6em; border-radius: 1em; }
.fr-list .tx{ flex: 1; display: grid; gap: .5em; }
.fr-list .tx b{ height: .9em; border-radius: .3em; background: var(--g200); }
.fr-list .tx em{ height: .7em; border-radius: .3em; background: var(--g100); }
.fr-ck{ flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; border: .18em solid var(--g200); }
.fr-ck svg{ width: 1.2em; height: 1.2em; fill: none; stroke: var(--white); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; transform: scale(0); }
.fr-btn{ position: absolute; z-index: 2; left: 0; right: 0; bottom: 6.4em; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: .45em; height: 3.3em; padding: 0 1.4em 0 1.1em; border-radius: 99em; background: var(--black); color: var(--white); font: 700 1.2em/1 var(--f-sans); box-shadow: 0 .8em 1.4em -.7em rgba(0, 0, 0, .45); }
.fr-btn .ico{ width: 1.15em; height: 1.15em; stroke-width: 2.6; }
.fr-tabs{ position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; height: 6.4em; padding-bottom: 1em; background: var(--white); border-top: 1px solid var(--g100); }
.fr-tabs span{ color: var(--g400); }
.fr-tabs span.on{ color: var(--burgundy); }
.fr-tabs .ico{ width: 2.2em; height: 2.2em; }
.fr-dim{ position: absolute; z-index: 5; inset: 0; background: var(--black); opacity: 0; }
.fr-sheet{ position: absolute; z-index: 6; left: 0; right: 0; top: 100%; display: grid; gap: .9em; padding: 1.1em 1.6em 2.4em; border-radius: 2.2em 2.2em 0 0; background: var(--white); box-shadow: 0 -1em 3em rgba(42, 7, 20, .18); }
.fr-sheet .hd{ justify-self: center; width: 4em; height: .5em; border-radius: 99em; background: var(--g200); }
.fr-sheet b{ margin-top: .2em; font: 900 1.9em/1 var(--f-display); }
.fr-sheet .fl{ display: flex; align-items: center; height: 4.2em; padding: 0 1.2em; border-radius: 1.2em; background: var(--g50); box-shadow: inset 0 0 0 1px var(--g100); }
.fr-sheet .fl i{ width: 50%; height: .8em; border-radius: .3em; background: var(--g200); }
.fr-sheet .fl + .fl i{ width: 34%; }
.fr-sheet .sv{ display: grid; place-items: center; height: 3.3em; margin-top: .3em; border-radius: 99em; background: var(--burgundy); color: var(--white); font: 700 1.2em/1 var(--f-sans); }
.fr-note{ position: absolute; z-index: 8; left: 1.2em; right: 1.2em; top: 4.3em; display: flex; align-items: center; gap: .8em; padding: .9em 1em; border-radius: 1.6em; background: rgba(27, 27, 29, .96); color: var(--white); font: 600 1.15em/1.2 var(--f-sans); box-shadow: 0 1em 2.4em -.6em rgba(0, 0, 0, .35); opacity: 0; }
.fr-note i{ flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .7em; background: var(--green); }
.fr-note svg{ width: 1.2em; height: 1.2em; fill: none; stroke: var(--white); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fr-touch{ position: absolute; z-index: 12; left: 0; top: 0; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; border-radius: 50%; background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 .2em rgba(255, 255, 255, .95), 0 .3em 1em rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; }
.b-sec{ position: relative; padding-block: 160px; }
.b-h2{ margin: 0; max-width: 820px; font: 900 clamp(40px, 4.6vw, 68px)/1 var(--f-display); letter-spacing: -.022em; text-wrap: balance; }
.b-lead{ max-width: 520px; margin: 0; color: var(--mut); font: 400 19px/1.55 var(--f-sans); text-wrap: pretty; }
.b-how{ padding-bottom: 40px; }
.b-how-head{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.b-steps{ margin: 96px 0 0; padding: 0; list-style: none; }
.b-step{ --fs: clamp(34px, 3.9vw, 58px); --nt: calc((var(--fs) * 1.02 - 16px) / 2); position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 40px; align-items: start; padding: 34px 0; border-top: 1px solid var(--e1); }
.b-step:last-child{ border-bottom: 1px solid var(--e1); }
.b-step > i{ position: relative; z-index: 1; grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: var(--nt); border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 2px var(--node); transition: background-color .4s, box-shadow .4s; }
.b-step:not(:last-child)::after{ content: ""; position: absolute; left: 7px; top: calc(34px + var(--nt) + 16px); bottom: calc(-34px - var(--nt)); width: 2px; background: var(--ln); transition: background-color .4s; }
.b-step:has(+ .b-step.lit)::after{ background: var(--hi); }
.b-how-tool{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; max-width: 900px; margin: 36px 0 0; padding-left: 56px; color: var(--mut); font: 400 18px/1.55 var(--f-sans); }
.b-how-tool .b-link{ font-size: 15px; white-space: nowrap; }
.b-step h3{ margin: 0; color: var(--e3); font: 900 var(--fs)/1.02 var(--f-display); letter-spacing: -.025em; text-wrap: balance; transition: color .5s var(--ease); }
.b-step p{ max-width: 560px; margin: 12px 0 0; color: var(--mut); font: 400 18px/1.55 var(--f-sans); opacity: .35; transition: opacity .5s var(--ease); }
.b-step.lit > i{ background: var(--hi); box-shadow: none; }
.b-step.lit h3{ color: var(--ink); }
.b-step.lit p{ opacity: 1; }
.b-blue{ padding: 0 0 120px; }
.b-fold-pin{ position: relative; display: flex; flex-direction: column; justify-content: center; height: 100vh; min-height: 700px; padding: 96px 0 32px; }
.b-blue-head{ margin: 0 0 24px; }
.b-blue-h{ margin: 0; font: 900 clamp(26px, 2.5vw, 38px)/1.05 var(--f-display); letter-spacing: -.015em; }
.b-blue-head p{ margin: 8px 0 0; color: var(--mut); font: 400 16px/1.45 var(--f-sans); }
.b-folds{ --fh: 76px; --H: 520px; display: grid; gap: 10px; }
.b-fold{ position: relative; height: var(--fh); overflow: hidden; border-radius: 26px; background: var(--fc); color: var(--fi); }
.b-fold:first-child{ height: var(--H); }
.b-fold[data-tone="blush"]{ --fc: var(--blush-50); --fi: var(--black); --fa: var(--burgundy); --fm: #5E4650; box-shadow: inset 0 0 0 1px rgba(90, 15, 46, .08); }
.b-fold[data-tone="ink"]{ --fc: #0F0F12; --fi: var(--white); --fa: var(--burgundy-300); --fm: #A0A0A7; box-shadow: inset 0 0 0 1px #1F1F23; }
.b-fold[data-tone="burg"]{ --fc: var(--burgundy); --fi: var(--white); --fa: var(--burgundy-200); --fm: rgba(255, 255, 255, .74); }
.b-fold .hd{ position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; height: var(--fh); padding: 0 32px; cursor: pointer; }
.b-fold .hd .n{ color: var(--fa); font: 500 13px/1 var(--f-mono); }
.b-fold .hd b{ font: 900 23px/1 var(--f-display); letter-spacing: -.01em; }
.b-fold .hd .tg{ margin-left: auto; overflow: hidden; color: var(--fm); font: 500 15px/1.2 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.b-fold:first-child .hd .tg{ opacity: 0; }
.b-fold .fb{ position: absolute; left: 0; right: 0; top: var(--fh); height: calc(var(--H) - var(--fh)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 4px 32px 32px; transform-origin: 50% 0; }
.b-fold:not(:first-child) .fb{ opacity: 0; visibility: hidden; }
.b-fold .fb h3{ margin: 0; font: 900 clamp(34px, 3.3vw, 52px)/1.02 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.b-fold .fb p{ max-width: 430px; margin: 20px 0 0; color: var(--fm); font: 400 18px/1.55 var(--f-sans); }
.b-fold .vz{ position: relative; height: 100%; max-height: 340px; overflow: hidden; border-radius: 18px; }
.vz-design{ background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(90, 15, 46, .07); }
.vz-design .frs{ position: absolute; inset: 13% 9%; display: flex; justify-content: space-between; }
.vz-design .fr{ position: relative; width: 25%; border-radius: 14px; background: var(--white); box-shadow: 0 10px 24px -14px rgba(42, 7, 20, .35), 0 0 0 1px rgba(90, 15, 46, .06); }
.vz-design .fr i{ position: absolute; left: 12%; right: 12%; height: 6%; border-radius: 4px; background: var(--g100); }
.vz-design .fr i:nth-child(1){ top: 9%; height: 16%; border-radius: 8px; background: var(--g200); }
.vz-design .fr i:nth-child(2){ top: 31%; right: 30%; }
.vz-design .fr i:nth-child(3){ top: 41%; }
.vz-design .fr i:nth-child(4){ top: 51%; right: 40%; }
.vz-design .fr.b i:nth-child(1){ background: var(--burgundy); }
.vz-design .fr .cp{ position: absolute; left: 12%; right: 12%; bottom: 10%; display: grid; gap: 7%; height: 22%; opacity: 0; }
.vz-design .fr .cp i{ position: static; height: auto; border-radius: 3px; background: var(--burgundy-200); }
.vz-design .pk{ position: absolute; left: 50%; top: -12px; padding: 5px 9px; border-radius: 99px; background: var(--burgundy); color: var(--white); font: 600 11px/1 var(--f-sans); white-space: nowrap; transform: translate(-50%, 4px) scale(.8); opacity: 0; }
.vz-design .fr.b::after{ content: ""; position: absolute; inset: -5px; border-radius: 18px; box-shadow: 0 0 0 2px var(--burgundy); opacity: 0; }
.vz-design .cu{ position: absolute; z-index: 2; left: 0; top: 0; display: flex; align-items: flex-start; gap: 2px; }
.vz-design .cu svg{ width: 20px; height: 20px; }
.vz-design .cu em{ margin-top: 14px; padding: 4px 8px; border-radius: 6px; color: var(--white); font: 600 11px/1 var(--f-sans); font-style: normal; white-space: nowrap; }
.vz-design .you em{ background: var(--cherry); }
.vz-design .us em{ background: var(--black); }
.vz-design .us .blk{ position: absolute; left: 22px; top: 34px; display: grid; gap: 5px; width: 64px; padding: 8px; border-radius: 8px; background: var(--white); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .4); }
.vz-design .us .blk i{ height: 5px; border-radius: 3px; background: var(--burgundy-200); }
.vz-design .us .blk i:nth-child(2){ width: 70%; }
.vz-design .you{ left: 16%; top: 78%; }
.vz-design .us{ left: 78%; top: 72%; }
.b-fold.on .vz-design .you{ animation: vz-you 7s var(--ease-io) infinite; }
.b-fold.on .vz-design .us{ animation: vz-us 7s var(--ease-io) infinite; }
.b-fold.on .vz-design .us .blk{ animation: vz-blk 7s linear infinite; }
.b-fold.on .vz-design .fr.b::after{ animation: vz-ring 7s linear infinite; }
.b-fold.on .vz-design .pk{ animation: vz-pick 7s var(--ease) infinite; }
.b-fold.on .vz-design .fr.b .cp{ animation: vz-copy 7s linear infinite; }
@keyframes vz-you{ 0% { left: 16%; top: 78%; } 22%, 30% { left: 52%; top: 48%; } 26% { left: 52%; top: 49.5%; } 50%, 100% { left: 24%; top: 80%; } }
@keyframes vz-us{ 0%, 34% { left: 78%; top: 72%; } 58%, 66% { left: 50%; top: 64%; } 86%, 100% { left: 78%; top: 72%; } }
@keyframes vz-blk{ 0%, 61% { opacity: 1; transform: none; } 64%, 92% { opacity: 0; transform: scale(.7); } 96%, 100% { opacity: 1; transform: none; } }
@keyframes vz-ring{ 0%, 25% { opacity: 0; } 28%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes vz-pick{ 0%, 26% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } 30%, 92% { opacity: 1; transform: translate(-50%, 0) scale(1); } 97%, 100% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } }
@keyframes vz-copy{ 0%, 62% { opacity: 0; } 66%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.vz-code{ background: #000; box-shadow: inset 0 0 0 1px #1F1F23; }
.vz-code .bar{ display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-bottom: 1px solid #1B1B1D; color: #85858C; font: 500 12px/1 var(--f-mono); }
.vz-code .bar i{ width: 9px; height: 9px; border-radius: 50%; background: #2E2E31; }
.vz-code .bar span{ margin-left: 8px; }
.vz-code .bar{ white-space: nowrap; overflow: hidden; }
.vz-code .bar b{ margin-left: auto; color: var(--burgundy-300); font-weight: 500; }
.viz-code{ padding: 16px 0; font: 500 13.5px/1.9 var(--f-mono); color: var(--g300); }
.viz-code .ln{ display: grid; grid-template-columns: 44px 20px 1fr; padding-right: 20px; white-space: pre; opacity: .25; transition: opacity .3s, background-color .3s; }
.viz-code .ln i{ color: #404046; font-style: normal; text-align: right; padding-right: 12px; }
.viz-code .ln.add{ background: rgba(170, 208, 183, .06); }
.viz-code .ln.add b{ color: var(--green-300); }
.viz-code .ln.del{ background: rgba(246, 113, 115, .07); }
.viz-code .ln.del b{ color: var(--cherry-400); }
.viz-code .ln b{ font-weight: 500; }
.viz-code .ln.in{ opacity: 1; }
.viz-code .k{ color: var(--burgundy-300); }
.viz-code .s{ color: var(--green-300); }
.viz-code .n{ color: var(--amber-300); }
.vz-grow{ display: flex; align-items: center; justify-content: center; gap: 16px; background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.vz-grow .vd{ position: relative; z-index: 1; width: 22%; max-width: 104px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: linear-gradient(165deg, var(--blush), var(--burgundy-300)); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .55); }
.vz-grow .vd:nth-child(2){ width: 26%; max-width: 120px; background: linear-gradient(165deg, #404046, #1B1B1D); }
.vz-grow .vd:nth-child(3){ background: linear-gradient(165deg, var(--amber-300), var(--amber-500) 60%, #8B5200); }
.vz-grow .vd::before{ content: ""; position: absolute; left: 50%; top: 44%; margin: -10px 0 0 -6px; border: 10px solid transparent; border-left: 16px solid rgba(255, 255, 255, .92); border-right: 0; }
.vz-grow .vd:nth-child(1)::before{ border-left-color: var(--burgundy); }
.vz-grow .vd i{ position: absolute; left: 10px; right: 10px; bottom: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.vz-grow .vd i::after{ content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.b-fold.on .vz-grow .vd i::after{ animation: b-play 4s linear infinite; }
.b-fold.on .vz-grow .vd:nth-child(2) i::after{ animation-delay: -1.3s; }
.b-fold.on .vz-grow .vd:nth-child(3) i::after{ animation-delay: -2.6s; }
@keyframes b-play{ to { transform: scaleX(1); } }
.vz-grow .vd b{ position: absolute; left: 10px; right: 10px; bottom: 24px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.vz-grow .vd b::after{ content: ""; position: absolute; left: 0; top: -12px; width: 70%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.vz-grow svg{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
.vz-grow .ar{ fill: rgba(255, 255, 255, .07); }
.vz-grow .lnp{ fill: none; stroke: var(--burgundy-200); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.b-fold.on .vz-grow .lnp{ animation: vz-line 6s var(--ease-io) infinite; }
@keyframes vz-line{ 0% { stroke-dashoffset: 1; } 55%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce){.b-fold *{ animation: none !important; }
.vz-design .pk, .vz-design .fr.b::after, .vz-design .fr .cp{ opacity: 1; transform: translate(-50%, 0); }
.vz-design .fr .cp{ transform: none; }
.vz-grow .lnp{ stroke-dashoffset: 0; }}
.b-rel{ padding: 0; }
.b-rel-pin{ position: relative; height: 100vh; min-height: 760px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.b-rel-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.b-rel-head .b-lead{ margin-top: 14px; }
.b-rel-track{ display: flex; gap: 32px; padding-left: var(--cl); width: max-content; will-change: transform; }
.b-card{ position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center; width: min(1040px, 76vw); height: min(600px, 66vh); padding: 48px 48px 48px 56px; overflow: hidden; border-radius: 32px; color: var(--white); text-decoration: none; isolation: isolate; }
.b-card[data-card="burg"]{ background: var(--burgundy); }
.b-card[data-card="graph"]{ background: #1B1B1D; box-shadow: inset 0 0 0 1px #2E2E31; }
.b-card[data-card="blush"]{ background: var(--blush); color: var(--black); }
.b-card[data-card="white"]{ background: var(--white); color: var(--black); }
html[data-theme="light"] .b-card[data-card="white"], html[data-theme="light"] .b-case-hero[data-card="white"]{ box-shadow: inset 0 0 0 1px var(--e2); }
.b-card .tagrow{ display: flex; align-items: center; gap: 12px; }
.b-tag{ padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .14); font: 600 12px/1 var(--f-mono); }
.b-card[data-card="blush"] .b-tag, .b-card[data-card="white"] .b-tag{ background: rgba(90, 15, 46, .1); color: var(--burgundy); }
.b-card code{ font-size: 13px; opacity: .6; }
.b-card h3{ margin: 26px 0 18px; font: 900 clamp(44px, 4.6vw, 66px)/.92 var(--f-display); letter-spacing: -.028em; }
.b-card p{ max-width: 380px; margin: 0; font: 400 18px/1.5 var(--f-sans); opacity: .78; }
.b-card .role{ margin-top: 14px; font: 500 14px/1.4 var(--f-sans); opacity: .6; }
.b-card .more{ display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; font: 600 15px/1 var(--f-sans); }
.b-card .proof{ display: flex; flex-wrap: wrap; gap: 8px; max-width: 440px; margin: 22px 0 0; padding: 0; list-style: none; }
.b-card .proof li{ display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 99px; background: rgba(255, 255, 255, .13); font: 600 13px/1.2 var(--f-sans); }
.b-card .proof .ico{ width: 15px; height: 15px; }
.b-card[data-card="blush"] .proof li, .b-card[data-card="white"] .proof li{ background: rgba(90, 15, 46, .1); color: var(--burgundy); }
.b-card .proof + .more{ margin-top: 28px; }
.b-card .more .ico{ transition: transform .35s var(--ease); }
.b-card:hover .more .ico{ transform: translateX(5px); }
.b-card .dv{ display: grid; place-items: center; height: 100%; }
.b-card .dev-phone{ --w: min(250px, 25vh); }
.b-card .dev-browser{ --w: min(470px, 33vw); }
.b-card .dev-tablet{ --w: min(330px, 32vh); }
.b-rel-prog{ display: flex; gap: 10px; margin-top: 36px; }
.b-rel-prog i{ position: relative; width: 56px; height: 3px; border-radius: 3px; background: var(--e2); overflow: hidden; }
.b-rel-prog i b{ position: absolute; inset: 0; background: var(--hi); transform: scaleX(0); transform-origin: left; }
@media (max-width: 900px){.b-card h3{ font-size: min(44px, 11.4vw); }}
.b-eng{ padding-bottom: 60px; }
.b-eng-head .b-h2{ max-width: none; white-space: pre-line; }
.b-eng-head .b-lead{ max-width: 600px; margin-top: 26px; }
.b-room{ position: relative; margin-top: 64px; overflow: hidden; border-radius: 24px; background: #0F0F12; color: var(--white); box-shadow: inset 0 0 0 1px #1F1F23, 0 50px 100px -60px rgba(42, 7, 20, .55); }
.b-room-in{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 28px 76px; align-items: center; padding: 52px 48px 40px; }
.b-wires{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-wires .w{ fill: none; stroke: #2A2A30; stroke-width: 2; }
.b-wires .w2{ fill: none; stroke: var(--burgundy-300); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .16 .84; stroke-dashoffset: 1; opacity: 0; transition: opacity .3s; }
.b-wires .w2.on{ opacity: 1; animation: b-flow 1.3s linear infinite; }
@keyframes b-flow{ to { stroke-dashoffset: 0; } }
.b-hub{ position: relative; z-index: 1; grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: center; text-align: center; }
.b-hub .bike{ width: 176px; height: auto; margin-bottom: 20px; overflow: visible; }
.b-hub .bike circle, .b-hub .bike path{ fill: none; stroke: #D7D7DA; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.b-hub .bike .fr{ stroke: var(--burgundy-300); }
.b-hub .bike .hb{ fill: #0F0F12; stroke: var(--burgundy-300); }
.b-room-in.busy .bike .wh{ animation: b-wheel 1.5s linear infinite; }
@keyframes b-wheel{ to { transform: rotate(360deg); } }
.b-hub b{ display: block; font: 900 44px/1 var(--f-display); letter-spacing: -.02em; }
.b-hub .tg{ margin-top: 10px; color: var(--burgundy-300); font: 500 12px/1.35 var(--f-mono); }
.b-hub p{ max-width: 290px; margin: 16px 0 0; color: #A0A0A7; font: 400 14.5px/1.55 var(--f-sans); }
.b-skill{ position: relative; z-index: 1; padding: 20px 20px 18px; border-radius: 16px; background: #16161A; box-shadow: inset 0 0 0 1px #26262B; transition: box-shadow .35s, background-color .35s; }
.b-skill[data-i="0"]{ grid-column: 1; grid-row: 1; }
.b-skill[data-i="1"]{ grid-column: 1; grid-row: 2; }
.b-skill[data-i="2"]{ grid-column: 3; grid-row: 1; }
.b-skill[data-i="3"]{ grid-column: 3; grid-row: 2; }
.b-skill code{ display: block; color: #D7D7DA; font: 500 15px/1 var(--f-mono); transition: color .3s; }
.b-skill p{ margin: 10px 0 0; color: #A0A0A7; font: 400 14.5px/1.5 var(--f-sans); }
.b-skill .st{ display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #85858C; font: 500 11px/1 var(--f-mono); transition: color .3s; }
.b-skill .st i{ width: 7px; height: 7px; border-radius: 50%; background: #404046; transition: background-color .3s, box-shadow .3s; }
.b-skill .st em{ font-style: normal; }
.b-skill .st .v{ margin-left: auto; color: #85858C; font-weight: 500; }
.b-skill.on .st .v{ color: #A0A0A7; }
.b-skill.on{ background: #1B1B20; box-shadow: inset 0 0 0 1px rgba(227, 172, 189, .45); }
.b-skill.on code{ color: var(--burgundy-300); }
.b-skill.on .st{ color: var(--green-300); }
.b-skill.on .st i{ background: var(--green-300); box-shadow: 0 0 0 4px rgba(170, 208, 183, .15); }
.b-room-log{ display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 48px 20px; overflow: hidden; border-top: 1px solid #1B1B1D; color: #BEBEC3; font: 500 14px/1.4 var(--f-mono); white-space: nowrap; }
.b-room-log .pr{ color: var(--burgundy-300); }
.b-room-log .ar{ color: var(--green-300); }
.b-room-log .lo{ color: var(--green-300); }
.b-room-log .lo:empty{ display: none; }
.b-room-log .b-caret{ margin-left: 0; }
@media (prefers-reduced-motion: reduce){.b-room-in .bike .wh, .b-wires .w2.on{ animation: none; }}
.bf-flow{ position: relative; display: flex; flex-direction: column; align-items: center; padding: 40px 24px 36px; }
.bf-wires, .bf-tok{ display: none; }
.bf-idea{ position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; width: 136px; padding: 16px 12px 15px; border-radius: 16px; background: var(--blush); color: var(--black); text-align: center; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); }
.bf-idea .ico, .bf-tok .ico{ width: 26px; height: 26px; color: var(--burgundy); stroke-width: 1.9; }
.bf-idea b{ font: 700 16px/1.2 var(--f-sans); }
.bf-hub{ position: relative; z-index: 1; display: grid; justify-items: center; width: 230px; margin-top: 44px; text-align: center; }
.bf-hub .bike{ position: relative; width: 150px; height: auto; overflow: visible; }
.bf-hub .bike circle, .bf-hub .bike path{ fill: none; stroke: #D7D7DA; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bf-hub .bike .fr{ stroke: var(--burgundy-300); }
.bf-hub .bike .hb{ fill: #0F0F12; stroke: var(--burgundy-300); }
.bf-hub .cap b{ display: block; margin-top: 14px; font: 900 38px/1 var(--f-display); letter-spacing: -.02em; }
.bf-hub .cap p{ margin: 10px 0 0; color: #BEBEC3; font: 400 15px/1.45 var(--f-sans); text-wrap: balance; }
.bf-glow{ position: absolute; left: 50%; top: -40px; width: 300px; height: 200px; margin-left: -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(156, 61, 96, .42), transparent); opacity: 0; transition: opacity .6s; pointer-events: none; }
.bf-hub::before, .bf-st::before{ content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 44px; margin-left: -1px; background: #2A2A30; }
.bf-st::before{ height: 36px; }
.bf-stages{ display: grid; gap: 36px; width: 100%; max-width: 760px; margin: 36px 0 0; padding: 0; list-style: none; }
.bf-st{ position: relative; z-index: 1; container-type: inline-size; border-radius: 18px; background: #16161A; box-shadow: inset 0 0 0 1px rgba(227, 172, 189, .42); transition: box-shadow .5s, background-color .5s; }
.bf-st-in{ display: grid; gap: 18px; padding: 20px 18px 18px; }
@container (min-width: 520px){ .bf-st-in { grid-template-columns: minmax(0, 1fr) minmax(150px, 36%); align-items: center; gap: 0 24px; padding: 22px 22px 22px 24px; } }
.bf-hd{ display: flex; align-items: baseline; gap: 12px; }
.bf-n{ flex: none; color: var(--burgundy-300); font: 500 13px/1 var(--f-mono); transition: color .5s; }
.bf-st h3{ margin: 0; font: 900 22px/1.15 var(--f-display); letter-spacing: -.01em; }
.bf-st .ln{ margin: 8px 0 0; color: #BEBEC3; font: 400 15px/1.5 var(--f-sans); text-wrap: pretty; }
.bf-pts{ display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.bf-pts li{ display: flex; align-items: flex-start; gap: 10px; color: #D7D7DA; font: 500 14px/1.4 var(--f-sans); }
.bf-ck{ flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1.5px; border-radius: 50%; background: var(--green-300); transition: background-color .3s, box-shadow .3s; }
.bf-ck svg{ width: 11px; height: 11px; fill: none; stroke: #0F0F12; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.bf-next{ position: relative; margin: 13px 0 0; padding: 12px 0 0 27px; border-top: 1px dashed #2E2E31; color: #85858C; font: 400 14px/1.4 var(--f-sans); text-wrap: pretty; }
.bf-next::before{ content: ""; position: absolute; left: 1px; top: 14px; width: 15px; height: 15px; border: 1.5px dashed #65656D; border-radius: 50%; box-sizing: border-box; }
.bf-pic{ position: relative; height: 124px; overflow: hidden; border-radius: 12px; background: #0F0F12; box-shadow: inset 0 0 0 1px #232328; transition: opacity .35s; }
.bf-p0{ display: flex; align-items: center; justify-content: center; gap: 10%; padding: 0 10%; }
.bf-p0 .doc{ flex: 1; max-width: 128px; display: grid; gap: 8px; }
.bf-p0 .doc i{ display: block; height: 6px; border-radius: 3px; background: #4A4A52; transform-origin: 0 50%; }
.bf-p0 .doc i:nth-child(1){ width: 48%; height: 8px; margin-bottom: 3px; background: var(--burgundy-300); }
.bf-p0 .doc i:nth-child(2){ width: 96%; }
.bf-p0 .doc i:nth-child(3){ width: 78%; }
.bf-p0 .doc i:nth-child(4){ width: 88%; }
.bf-p0 .doc i:nth-child(5){ width: 60%; }
.bf-p0 .scr{ position: relative; flex: none; display: grid; align-content: start; gap: 5px; width: 50px; height: 90px; padding: 8px 6px; border-radius: 10px; background: #F6F6F8; box-shadow: 0 0 0 3px #000, 0 14px 26px -12px rgba(0, 0, 0, .9); }
.bf-p0 .scr i{ display: block; height: 5px; border-radius: 2px; background: #D7D7DA; }
.bf-p0 .scr i:nth-child(1){ height: 20px; border-radius: 4px; background: var(--burgundy); }
.bf-p0 .scr i:nth-child(3){ width: 70%; }
.bf-p0 .scr em{ display: block; width: 64%; height: 10px; margin-top: 5px; border-radius: 5px; background: #000; }
.bf-p0 .eye{ position: absolute; right: -11px; top: -10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cherry); color: var(--white); box-shadow: 0 0 0 3px #0F0F12; }
.bf-p0 .eye svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bf-p1{ display: flex; align-items: center; gap: 9%; padding: 0 9%; }
.bf-p1 .lanes{ flex: 1; display: grid; gap: 13px; }
.bf-p1 .lanes span{ display: flex; align-items: center; gap: 8px; }
.bf-p1 .lanes b{ position: relative; flex: 1; height: 8px; overflow: hidden; border-radius: 4px; background: #26262B; }
.bf-p1 .lanes b::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--burgundy-300); transform-origin: 0 50%; }
.bf-p1 .lanes i{ flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--green-300); }
.bf-p1 .lanes i svg{ width: 9px; height: 9px; fill: none; stroke: #0F0F12; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.bf-p1 .map{ flex: none; width: 38%; max-width: 96px; height: auto; overflow: visible; }
.bf-p1 .map .e{ fill: none; stroke: #55555C; stroke-width: 1.6; stroke-dasharray: 1; }
.bf-p1 .map .n{ fill: #1B1B20; stroke: var(--burgundy-300); stroke-width: 1.8; }
.bf-p1 .map .n.c{ fill: var(--burgundy-600); stroke: none; }
.bf-p2 .gr{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.bf-p2 .ar{ fill: rgba(240, 207, 217, .08); }
.bf-p2 .lnp{ fill: none; stroke: var(--burgundy-200); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 2; }
.bf-p2 .bdg{ position: absolute; left: 12px; top: 12px; display: grid; justify-items: start; gap: 6px; }
.bf-p2 .badge{ display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px 0 8px; border-radius: 8px; background: #000; color: var(--white); box-shadow: inset 0 0 0 1px #2E2E31; }
.bf-p2 .badge .ico{ width: 14px; height: 14px; }
.bf-p2 .badge .tx{ display: grid; gap: 4px; }
.bf-p2 .badge .tx i{ display: block; width: 28px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.bf-p2 .badge .tx i + i{ width: 42px; height: 5px; background: var(--white); }
.bf-p2 .badge .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--green-300); box-shadow: 0 0 0 3px rgba(170, 208, 183, .2); }
@media (max-width: 600px){.bf-flow{ padding: 32px 16px 28px; }
.bf-st-in{ padding: 18px 16px 16px; }}
@media (max-width: 900px){.bf-next{ font-size: 15px; }}
.b-eng-close{ max-width: 760px; margin: 44px 0 0; font: 800 clamp(22px, 2.1vw, 30px)/1.25 var(--f-display); letter-spacing: -.012em; text-wrap: balance; }
@media (min-width: 1200px){html:not(.static) .bf-flow{ --hw: clamp(160px, 13vw, 190px); display: grid; grid-template-columns: clamp(108px, 9vw, 132px) clamp(40px, 3.6vw, 60px) var(--hw) clamp(56px, 5vw, 88px) minmax(0, 1fr); align-items: center; padding: 48px 44px; }
html:not(.static) .bf-wires{ display: block; }
html:not(.static) .bf-idea{ grid-column: 1; width: auto; }
html:not(.static) .bf-hub{ grid-column: 3; width: auto; margin: 0 0 calc(var(--hw) * .2); }
html:not(.static) .bf-hub .bike{ width: 100%; }
html:not(.static) .bf-hub .cap{ position: absolute; left: 50%; top: 100%; width: 240px; margin-left: -120px; }
html:not(.static) .bf-hub .cap b{ margin-top: 12px; font-size: 36px; }
html:not(.static) .bf-hub::before, html:not(.static) .bf-st::before{ display: none; }
html:not(.static) .bf-stages{ grid-column: 5; gap: 14px; max-width: none; margin: 0; }
html:not(.static) .bf-st-in{ grid-template-columns: minmax(0, 1fr) clamp(150px, 32%, 210px); align-items: center; gap: 0 20px; padding: 18px 18px 18px 22px; }
html:not(.static) .bf-pic{ height: 118px; }
html:not(.static) .bf-wires .pt{ fill: #0F0F12; stroke: #404046; stroke-width: 2; transition: stroke .5s; }
html:not(.static) .bf-wires .pt.on{ stroke: var(--burgundy-300); }
html:not(.static) .bf-tok{ position: absolute; z-index: 3; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--blush); box-shadow: 0 0 0 5px rgba(248, 230, 236, .12), 0 10px 20px -8px rgba(0, 0, 0, .7); opacity: 0; pointer-events: none; }
html:not(.static) .bf-tok .ico{ width: 20px; height: 20px; }
html:not(.static) .bf-flow.feed .bf-tok{ animation: bf-feed 1.1s var(--ease-io) both; }
html:not(.static) .bf-flow.busy .bf-hub .bike .wh{ animation: b-wheel 1.5s linear infinite; }
html:not(.static) .bf-flow.busy .bf-glow{ opacity: 1; }
html:not(.static) .bf-flow.live .bf-st:not(.lit){ background: #141417; box-shadow: inset 0 0 0 1px #26262B; }
html:not(.static) .bf-flow.live .bf-st:not(.lit) .bf-n{ color: #85858C; }
html:not(.static) .bf-flow.live .bf-st:not(.lit) .bf-ck{ background: transparent; box-shadow: inset 0 0 0 1.5px #55555C; }
html:not(.static) .bf-flow.live .bf-st:not(.lit) .bf-ck svg{ opacity: 0; transform: scale(.4); }
html:not(.static) .bf-flow.live .bf-st.lit .bf-pts li:nth-child(1) :is(.bf-ck, .bf-ck svg){ transition-delay: var(--ck); }
html:not(.static) .bf-flow.live .bf-st.lit .bf-pts li:nth-child(2) :is(.bf-ck, .bf-ck svg){ transition-delay: calc(var(--ck) + .3s); }
html:not(.static) .bf-flow.live .bf-st.lit .bf-pts li:nth-child(3) :is(.bf-ck, .bf-ck svg){ transition-delay: calc(var(--ck) + .6s); }
html:not(.static) .bf-st[data-i="0"]{ --ck: .95s; }
html:not(.static) .bf-st[data-i="1"]{ --ck: 1.8s; }
html:not(.static) .bf-st[data-i="2"]{ --ck: 1.15s; }
html:not(.static) .bf-flow.live .bf-st:not(.lit) .bf-pic{ opacity: .3; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p0 .doc i{ animation: bf-write .42s var(--ease) both; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p0 .doc i:nth-child(2){ animation-delay: .2s; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p0 .doc i:nth-child(3){ animation-delay: .4s; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p0 .doc i:nth-child(4){ animation-delay: .6s; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p0 .doc i:nth-child(5){ animation-delay: .8s; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p0 .eye{ animation: bf-pop .45s cubic-bezier(.34, 1.56, .64, 1) 1.4s both; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p1 .lanes b::after{ animation: bf-write var(--t) var(--ease-io) .1s both; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p1 .lanes i{ animation: bf-pop .4s cubic-bezier(.34, 1.56, .64, 1) calc(var(--t) + .1s) both; }
html:not(.static) .bf-flow.live .bf-st:not(.lit) .bf-p2 .badge .dot{ background: var(--amber-300); box-shadow: none; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p2 .badge .dot{ animation: bf-live .7s ease .85s both; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p2 .badge + .badge .dot{ animation-delay: 1s; }
html:not(.static) .bf-flow.live .bf-st.lit .bf-p2 .lnp{ animation: bf-draw 1.5s var(--ease-io) .5s both; }
html:not(.static) .bf-flow.fade .bf-pic{ opacity: .3; }}
@keyframes bf-feed{ 0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.5); } 18% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1); } 82% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(.85); } 100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(.3); } }
@keyframes bf-write{ from { transform: scaleX(0); } }
@keyframes bf-pop{ from { opacity: 0; transform: scale(.3); } }
@keyframes bf-draw{ from { stroke-dashoffset: 1; } }
@keyframes bf-live{ from { background: var(--amber-300); box-shadow: 0 0 0 0 rgba(170, 208, 183, .55); } 45% { background: var(--green-300); box-shadow: 0 0 0 7px rgba(170, 208, 183, 0); } }
.b-studio{ padding: 90px 0 30px; }
.b-studio-in{ display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-top: 56px; border-top: 1px solid var(--e1); }
.b-studio .sub{ margin: 18px 0 0; color: var(--mut); font: 800 clamp(22px, 2.2vw, 32px)/1.2 var(--f-display); letter-spacing: -.01em; }
.b-founder{ display: grid; grid-template-columns: 52px auto; gap: 6px 14px; align-items: center; }
.b-founder i{ grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--burgundy); color: var(--white); font: 900 17px/1 var(--f-display); font-style: normal; }
.b-founder b{ display: block; font: 700 17px/1.25 var(--f-sans); }
.b-founder span span{ color: var(--dim); font: 500 13px/1.3 var(--f-mono); }
.b-founder code{ grid-column: 2; color: var(--dim); font-size: 12px; }
.b-founder b a{ color: inherit; text-decoration: none; }
.b-founder b a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.b-proof{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 56px; padding: 0; list-style: none; }
.b-proof a{ display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: start; gap: 16px; padding: 22px 0 0; border-top: 1px solid var(--e1); color: var(--ink); text-decoration: none; }
.b-proof .ico{ width: 22px; height: 22px; color: var(--hi); }
.b-proof .ico:last-child{ width: 18px; height: 18px; margin-top: 2px; color: var(--dim); transition: transform .3s var(--ease), color .2s; }
.b-proof a:hover .ico:last-child{ transform: translate(2px, -2px); color: var(--ink); }
.b-proof b{ display: block; font: 700 17px/1.3 var(--f-sans); }
.b-proof small{ display: block; margin-top: 6px; color: var(--mut); font: 400 15px/1.45 var(--f-sans); }
.b-cta{ padding-top: 80px; }
.b-ctabox{ position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 540px; padding: 96px 88px; overflow: hidden; border-radius: 36px; background: var(--burgundy); color: var(--white); }
.b-ctabox > :not(.cl-print){ position: relative; z-index: 1; }
.b-ctabox .prompt{ color: var(--burgundy-200); font: 500 18px/1 var(--f-mono); }
.b-ctabox .b-caret{ background: var(--white); }
.b-ctabox h2{ max-width: 800px; margin: 28px 0 0; font: 900 clamp(48px, 6.2vw, 98px)/.94 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.b-ctabox .acts{ display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 46px; }
.b-ctabox .b-btn{ background: var(--white); color: var(--black); }
.b-ctabox .b-btn:hover{ background: var(--blush); color: var(--black); }
.b-mail{ color: var(--white); font: 500 17px/1 var(--f-mono); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 6px; }
.b-mail:hover{ text-decoration-color: var(--white); }
.b-foot{ position: relative; z-index: 1; padding: 80px 0 40px; border-top: 1px solid var(--e1); }
.b-foot-top{ display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.b-foot-top .b-brand svg{ height: 24px; }
.b-foot-top nav{ display: flex; gap: 28px; }
.b-foot-top nav a{ color: var(--mut); text-decoration: none; font: 500 15px/1 var(--f-sans); }
.b-foot-top nav a:hover{ color: var(--ink); }
.b-foot-bot{ display: flex; align-items: center; gap: 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--e1); color: var(--dim); font: 500 13px/1 var(--f-mono); }
.b-foot-bot a{ color: var(--mut); text-decoration: none; }
.b-foot-bot .lang{ margin-left: auto; }
.b-cmd{ position: fixed; z-index: 90; inset: 0; display: flex; align-items: center; background: var(--page); opacity: 0; visibility: hidden; font: 500 22px/1 var(--f-mono); }
.b-cmd .p{ color: var(--hi); margin-right: 14px; }
.b-cmd .c::before{ content: "$ "; color: var(--dim); }
.b-case-head{ padding-top: 168px; }
.b-case-tags{ display: flex; align-items: center; gap: 14px; }
.b-case-tags a{ display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; color: var(--mut); font: 500 14px/1 var(--f-mono); text-decoration: none; }
.b-case-tags a:hover{ color: var(--ink); }
.b-case-tags .b-tag{ color: var(--hi); background: var(--tint); }
.b-case-tags code{ color: var(--dim); font-size: 13px; }
.b-case-head h1{ margin: 30px 0 0; font: 900 clamp(68px, 10vw, 160px)/.88 var(--f-display); letter-spacing: -.035em; }
.b-case-sub{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; margin-top: 36px; }
.b-case-sub p{ max-width: 620px; margin: 0; color: var(--mut); font: 400 24px/1.45 var(--f-sans); }
.b-meta{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 0; }
.b-meta dt{ color: var(--dim); font: 500 12px/1 var(--f-mono); }
.b-meta dd{ margin: 8px 0 0; font: 500 15px/1.4 var(--f-sans); }
.b-meta dd a{ color: inherit; text-decoration-color: var(--e3); text-underline-offset: 4px; }
.b-meta dd a:hover{ text-decoration-color: currentColor; }
.b-case-hero{ position: relative; display: grid; place-items: center; height: min(720px, 80vh); min-height: 560px; margin-top: 64px; overflow: hidden; border-radius: 32px; isolation: isolate; }
.b-case-hero[data-card="burg"]{ background: var(--burgundy); }
.b-case-hero[data-card="graph"]{ background: #1B1B1D; }
.b-case-hero[data-card="blush"]{ background: var(--blush); }
.b-case-hero[data-card="white"]{ background: var(--white); }
.b-case-hero .dev-phone{ --w: 300px; }
.b-case-hero .dev-browser{ --w: min(880px, 61vw); }
.b-case-hero .dev-tablet{ --w: 400px; }
.b-notes{ display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 80px; padding: 140px 0 0; }
.b-notes h2, .b-added > h2, .b-arch h2{ margin: 0; font: 900 34px/1 var(--f-display); letter-spacing: -.015em; }
.b-notes .intro{ max-width: 760px; margin: 0; font: 500 clamp(24px, 2.2vw, 31px)/1.42 var(--f-sans); letter-spacing: -.01em; }
.b-facts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
.b-fact{ padding: 24px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--e1); }
.b-fact b{ display: block; color: var(--hi); font: 900 clamp(44px, 4.4vw, 64px)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.b-fact span{ display: block; margin-top: 12px; color: var(--mut); font: 400 15px/1.45 var(--f-sans); }
.b-added{ padding-top: 140px; }
.b-entry{ display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 80px; margin-top: 64px; }
.b-entry .t{ position: sticky; top: 140px; align-self: start; }
.b-entry .plus{ display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); font: 600 18px/1 var(--f-mono); }
.b-entry h3{ margin: 18px 0 12px; font: 900 28px/1.08 var(--f-display); letter-spacing: -.015em; }
.b-entry p{ margin: 0; color: var(--mut); font: 400 17px/1.55 var(--f-sans); }
.b-entry .dv{ position: relative; display: grid; place-items: center; height: 520px; overflow: hidden; border-radius: 28px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--e1); }
.b-entry .dv .dev-phone{ --w: 240px; }
.b-entry .dv .dev-browser{ --w: min(640px, 44vw, calc(100vw + -660px)); }
.b-entry .dv .dev-tablet{ --w: 320px; }
.b-entry .t .b-link{ margin-top: 22px; }
.b-arch{ padding: 140px 0 120px; }
.b-arch-grid{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; margin-top: 40px; }
.b-arch > p{ max-width: 560px; margin: 16px 0 0; color: var(--mut); font: 400 18px/1.55 var(--f-sans); }
.b-graph{ position: relative; height: 440px; border-radius: 24px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--e1); }
.b-graph svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b-graph .e{ fill: none; stroke: var(--e2); stroke-width: 2; }
.b-graph .e2{ fill: none; stroke: var(--hi); stroke-width: 2; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.b-graph .p{ fill: var(--cherry-400); }
.b-gn{ position: absolute; z-index: 1; padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--e2); transform: translate(-50%, -50%); white-space: nowrap; }
.b-gn b{ display: block; font: 800 15px/1.1 var(--f-display); }
.b-gn small{ display: block; margin-top: 5px; color: var(--dim); font: 500 11px/1 var(--f-mono); }
.b-gn::before, .b-gn::after{ content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--s1); box-shadow: inset 0 0 0 2px var(--hi); }
.b-gn::before{ left: -4px; }
.b-gn::after{ right: -4px; }
.b-yaml{ margin: 0; padding: 24px; border-radius: 24px; background: #0F0F12; box-shadow: inset 0 0 0 1px #1B1B1D; color: var(--g300); font: 500 14px/1.9 var(--f-mono); white-space: pre-wrap; }
.b-yaml .k{ color: var(--hi); }
.b-yaml .c{ color: var(--dim); }
.b-next{ position: relative; display: block; padding: 110px 0 120px; border-top: 1px solid var(--e1); color: var(--ink); text-decoration: none; overflow: hidden; }
.b-next span{ color: var(--dim); font: 500 14px/1 var(--f-mono); }
.b-next b{ display: flex; align-items: center; gap: 24px; margin-top: 18px; font: 900 clamp(56px, 8vw, 128px)/.92 var(--f-display); letter-spacing: -.035em; transition: color .3s; }
.b-next b .ico{ width: .5em; height: .5em; transition: transform .5s var(--ease); }
.b-next:hover b{ color: var(--hi); }
.b-next:hover b .ico{ transform: translateX(16px); }
.b-set{ grid-column: 1 / -1; order: -1; container: b-set / inline-size; }
.b-set figcaption{ max-width: 65ch; }
.b-set .st{ --k: 1; --sw: min(var(--max, 100cqi), (100cqi + -24px + var(--k) * -24px) / (var(--k) + .5)); display: flex; align-items: center; gap: calc((100cqi + -24px + var(--sw) / -2) / var(--k) + var(--sw) * -1); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 24px; }
.b-set .st > *{ --w: var(--sw); scroll-snap-align: start; }
@container b-set (min-width: 400px){ .b-set .st:has(> .dev-phone) { --k: 2; } }
@container b-set (min-width: 594px){ .b-set .st:has(> .dev-phone) { --k: 3; } }
@container b-set (min-width: 788px){ .b-set .st:has(> .dev-phone) { --k: 4; } }
@container b-set (min-width: 982px){ .b-set .st:has(> .dev-phone) { --k: 5; } }
@container b-set (min-width: 1176px){ .b-set .st:has(> .dev-phone) { --k: 6; } }
@container b-set (min-width: 500px){ .b-set .st:has(> .dev-tablet) { --k: 2; } }
@container b-set (min-width: 744px){ .b-set .st:has(> .dev-tablet) { --k: 3; } }
@container b-set (min-width: 988px){ .b-set .st:has(> .dev-tablet) { --k: 4; } }
@media (min-width: 901px){.b-set .st:has(> .dev-phone){ --max: 170.3px; }
.b-set .st:has(> .dev-tablet){ --max: 264px; }}
@media (min-width: 901px) and (max-width: 1320px){.b-notes, .b-arch-grid{ grid-template-columns: minmax(0, 1fr); gap: 28px; }}
@media (max-width: 900px){.b-case-head h1{ font-size: min(68px, 14vw); }
.b-next b{ font-size: min(56px, 12vw); }
.b-case-hero .dev-tablet{ --w: min(400px, calc(100vw + -88px)); }
.b-entry .dv .dev-tablet{ --w: min(320px, calc(100vw + -88px)); }}
@media (max-width: 900px){.b-card .dv:has(> .dev-browser){ height: auto; min-width: 0; margin-right: -24px; padding: 20px 0; overflow: hidden; place-items: center start; }
.b-entry .dv:has(> .dev-browser){ height: auto; padding: 28px 0 28px 20px; place-items: center start; }
.b-case-hero:has(> .dev-browser){ height: auto; min-height: 0; padding: 40px 0 40px 20px; place-items: center start; }
.b-card .dv:has(> .dev-browser) > .dev-browser, .b-entry .dv:has(> .dev-browser) > .dev-browser, .b-case-hero:has(> .dev-browser) > .dev-browser{ --w: max(520px, calc(100vw + -96px)); max-width: none; }}
.b-index{ padding: 168px 0 140px; }
.b-index > code{ color: var(--dim); font-size: 15px; }
.b-index h1{ margin: 22px 0 0; font: 900 clamp(72px, 11vw, 168px)/.88 var(--f-display); letter-spacing: -.04em; }
.b-index-grid{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; margin-top: 72px; }
.b-loglist{ position: relative; margin: 0; padding: 0; list-style: none; }
.b-loglist::before{ content: ""; position: absolute; left: 7px; top: 34px; bottom: 34px; width: 2px; background: var(--e2); }
.b-loglist a{ position: relative; display: grid; grid-template-columns: 16px 74px minmax(0, 1fr); gap: 0 20px; align-items: baseline; padding: 26px 0; color: inherit; text-decoration: none; }
.b-loglist .dot{ position: relative; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 2px var(--node); transition: background-color .3s, box-shadow .3s; }
.b-loglist .h{ color: var(--hi); font: 500 14px/1 var(--f-mono); }
.b-loglist b{ font: 900 clamp(32px, 3.4vw, 50px)/1 var(--f-display); letter-spacing: -.02em; transition: color .25s; }
.b-loglist .ln{ grid-column: 3; margin-top: 10px; color: var(--mut); font: 400 16px/1.45 var(--f-sans); }
.b-loglist .b-tag{ grid-column: 3; justify-self: start; margin-top: 14px; background: var(--s2); color: var(--mut); }
.b-loglist a:hover b, .b-loglist a.on b{ color: var(--hi); }
.b-loglist a.on .dot{ background: var(--cherry); box-shadow: 0 0 0 4px rgba(200, 16, 46, .25); }
.b-prev{ position: sticky; top: 120px; align-self: start; height: min(600px, 70vh); overflow: hidden; border-radius: 28px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--e1); }
.b-prev > div{ position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.97); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.b-prev > div.on{ opacity: 1; transform: none; }
.b-prev .dev-phone{ --w: 240px; }
.b-prev .dev-browser{ --w: min(460px, 32vw); }
.b-prev .dev-tablet{ --w: 320px; }
.b-contact{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; min-height: 100vh; padding: 150px 0 100px; }
.b-contact h1{ margin: 0; font: 900 clamp(56px, 6.6vw, 104px)/.92 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.b-contact .b-mail{ display: inline-block; margin-top: 40px; color: var(--ink); font: 500 22px/1.2 var(--f-mono); text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.b-contact .b-mail:hover{ text-decoration-color: var(--ink); }
.b-contact .where{ margin: 16px 0 0; color: var(--mut); font: 400 17px/1.5 var(--f-sans); }
.b-commit{ overflow: hidden; border-radius: 22px; background: #0F0F12; box-shadow: inset 0 0 0 1px #2E2E31, 0 60px 120px -50px rgba(90, 15, 46, .6); }
.b-commit .bar{ display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #1B1B1D; color: var(--dim); font: 500 12px/1 var(--f-mono); }
.b-commit .bar i{ width: 11px; height: 11px; border-radius: 50%; background: #2E2E31; }
.b-commit .bar span{ margin-left: 10px; }
.b-commit .in{ padding: 26px 26px 28px; }
.b-commit label, .b-commit legend{ display: block; margin-bottom: 10px; color: var(--mut); font: 500 13px/1 var(--f-mono); }
.b-commit fieldset{ margin: 0 0 22px; padding: 0; border: 0; }
.b-commit .opts{ display: flex; flex-wrap: wrap; gap: 8px; }
.b-commit .opts button{ padding: 9px 12px; border: 0; border-radius: 8px; background: #1B1B1D; color: var(--g300); font: 500 13px/1 var(--f-mono); cursor: pointer; transition: background-color .2s, color .2s; }
.b-commit .opts button[aria-pressed="true"]{ background: var(--burgundy-300); color: var(--black); }
.b-commit input, .b-commit textarea{ display: block; width: 100%; margin-bottom: 20px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--black); box-shadow: inset 0 0 0 1px #2E2E31; color: var(--white); font: 500 15px/1.5 var(--f-mono); }
.b-commit textarea{ min-height: 120px; resize: vertical; }
.b-commit input:focus, .b-commit textarea:focus{ outline: none; box-shadow: inset 0 0 0 1.5px var(--burgundy-300); }
.b-commit ::placeholder{ color: #55555C; }
.b-commit .note{ margin: 14px 0 0; color: var(--dim); font: 400 13px/1.45 var(--f-sans); }
.b-commit .b-author{ display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
@media (max-width: 560px){.b-commit .b-author{ grid-template-columns: 1fr; gap: 0; }}
.b-commit .b-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.b-commit [aria-invalid="true"]{ box-shadow: inset 0 0 0 1.5px #F0656A; }
.b-commit .note.err{ color: #FF9EA1; }
.b-commit .note.ok{ color: var(--g300); }
.b-commit .b-send[disabled]{ opacity: .6; cursor: default; }
.b-commit button.b-send{ border: 0; cursor: pointer; }
.b-consent{ position: fixed; z-index: 59; left: 24px; bottom: 24px; max-width: 420px; padding: 20px 20px 18px; border-radius: 18px; background: var(--white); color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(0, 0, 0, .35); font: 400 14px/1.5 var(--f-sans); }
.b-consent p{ margin: 0 0 14px; }
.b-consent .acts{ display: flex; flex-wrap: wrap; gap: 10px; }
.b-consent .b-btn{ height: 44px; padding: 0 18px; border: 0; font-size: 14px; cursor: pointer; }
.b-consent .b-btn.no{ background: transparent; color: #000; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
@media (max-width: 560px){.b-consent{ left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }}
.b-foot-bot .b-consent-open{ padding: 0; border: 0; background: none; color: var(--mut); font: inherit; cursor: pointer; }
@media (max-width: 900px){.b-commit input, .b-commit textarea{ font-size: 16px; }}
html.mp .b-meta dd a{ position: relative; display: inline-block; }
html.mp .b-meta dd a::after{ content: ""; position: absolute; top: 50%; left: -4px; right: -4px; height: max(44px, 100%); transform: translateY(-50%); }
html.mp .b-bike-head .b-hero-cta .b-link{ z-index: 1; }
h1, h2, h3, .b-commit input, .b-commit textarea{ scroll-margin-top: 88px; }
.b-case-tags{ flex-wrap: wrap; }
.b-case-tags a, .b-case-tags .b-tag{ white-space: nowrap; }
.static .b-x-labels, .static .b-look, .static .b-layer, .static .fr-touch{ display: none; }
.static .b-ly:not(.top){ display: none; }
.static .b-step h3{ color: var(--ink); }
.static .b-step p{ opacity: 1; }
.static .b-step > i{ background: var(--hi); box-shadow: none; }
.static .b-fold-pin{ height: auto; min-height: 0; padding: 40px 0 0; }
.static .b-folds{ gap: 16px; }
.static .b-fold, .static .b-fold:first-child{ height: auto; }
.static .b-fold .hd{ cursor: default; }
.static .b-fold .hd .tg{ display: none; }
.static .b-fold .fb, .static .b-fold:not(:first-child) .fb{ position: static; height: auto; min-height: 380px; opacity: 1; visibility: visible; }
.static .b-rel-pin{ height: auto; overflow: visible; padding: 120px 0; }
.static .b-rel-track{ flex-direction: column; width: auto; padding: 0 24px 0 var(--cl); }
.static .b-card{ width: auto; height: auto; }
.static .b-rel-prog{ display: none; }
@media (max-width: 900px){.dir-b{ --cl: 24px; }
.dir-b .wrap{ width: calc(100% - 48px); margin-left: 24px; }
.b-rail, .b-spot, .b-wires{ display: none; }
.b-hero-in, .b-how-head, .b-step, .b-fold .fb, .b-room-in, .b-case-sub, .b-notes, .b-entry, .b-arch-grid, .b-index-grid, .b-contact{ grid-template-columns: 1fr; gap: 28px; }
.b-studio-in{ flex-direction: column; align-items: flex-start; }
.b-proof{ grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
.b-how-tool{ padding-left: 0; font-size: 17px; }
.b-card .proof li{ border-radius: 14px; }
.b-rel-head{ flex-direction: column; align-items: flex-start; gap: 18px; }
.b-link{ white-space: nowrap; }
.b-room-in{ padding: 32px 22px 24px; gap: 14px; }
.b-hub{ grid-column: auto; grid-row: auto; margin-bottom: 14px; }
.b-skill, .b-skill[data-i]{ grid-column: auto; grid-row: auto; }
.b-room-log{ padding: 14px 22px 18px; font-size: 12px; }
.b-step{ gap: 0; }
.b-step > i, .b-step::after{ display: none; }
.b-fold .hd{ padding: 0 22px; }
.b-fold .fb{ padding: 0 22px 26px; min-height: 0; }
.b-fold .vz{ height: 280px; }
.b-x{ height: 640px; }
.b-hero h1{ margin-top: 40px; }
.b-card{ grid-template-columns: 1fr; padding: 32px 24px; }
.b-card .dv{ height: 420px; }
.b-card .dev-browser, .b-entry .dv .dev-browser, .b-case-hero .dev-browser{ --w: calc(100vw - 96px); }
.b-facts{ grid-template-columns: 1fr; }
.b-ctabox{ padding: 56px 24px; min-height: 0; }
.b-entry .t{ position: static; }
.b-prev{ display: none; }
.b-foot-top, .b-foot-bot{ flex-direction: column; align-items: flex-start; }
.b-foot-bot .lang{ margin-left: 0; }
.b-graph{ height: auto; padding: 20px; display: grid; gap: 12px; }
.b-graph svg{ display: none; }
.b-gn{ position: relative; left: auto !important; top: auto !important; transform: none; }}
.b-ways{ padding-bottom: 40px; }
.b-ways-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.b-way{ position: relative; display: grid; align-content: start; gap: 12px; padding: 20px 20px 28px; overflow: hidden; border-radius: 26px; background: var(--wc); color: var(--wi); }
.b-way[data-tone="blush"]{ --wc: var(--blush-50); --wi: var(--black); --wa: var(--burgundy); --wm: #5E4650; box-shadow: inset 0 0 0 1px rgba(90, 15, 46, .08); }
.b-way[data-tone="ink"]{ --wc: #0F0F12; --wi: var(--white); --wa: var(--burgundy-300); --wm: #A0A0A7; box-shadow: inset 0 0 0 1px #1F1F23; }
.b-way[data-tone="burg"]{ --wc: var(--burgundy); --wi: var(--white); --wa: var(--burgundy-200); --wm: rgba(255, 255, 255, .74); }
.b-way h3{ margin: 12px 0 0; font: 900 clamp(26px, 2.4vw, 34px)/1.04 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.b-way p{ margin: 0; color: var(--wm); font: 400 17px/1.5 var(--f-sans); }
.vz-w{ position: relative; height: 180px; overflow: hidden; border-radius: 16px; }
.vz-flow{ background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(90, 15, 46, .07); }
.vz-flow .ln{ position: absolute; left: 18%; right: 18%; top: 46%; height: 2px; background: var(--burgundy-200); }
.vz-flow .nd{ position: absolute; top: 46%; width: 44px; height: 44px; margin: -21px 0 0 -22px; border-radius: 14px; background: var(--white); box-shadow: 0 10px 22px -12px rgba(42, 7, 20, .4), inset 0 0 0 1.5px var(--burgundy-300); }
.vz-flow .n1{ left: 18%; }
.vz-flow .n2{ left: 50%; background: var(--burgundy); box-shadow: 0 10px 22px -10px rgba(42, 7, 20, .55); }
.vz-flow .n3{ left: 82%; }
.vz-flow .pk{ position: absolute; top: 46%; left: 18%; width: 10px; height: 10px; margin: -4px 0 0 -5px; border-radius: 50%; background: var(--cherry); box-shadow: 0 0 0 5px rgba(200, 16, 46, .15); animation: w-pk 2.8s var(--ease-io) infinite; }
.vz-flow em{ position: absolute; top: calc(46% + 34px); transform: translateX(-50%); color: #5E4650; font: 500 12px/1 var(--f-mono); font-style: normal; }
.vz-flow .t1{ left: 18%; }
.vz-flow .t2{ left: 50%; }
.vz-flow .t3{ left: 82%; }
@keyframes w-pk{ 0% { left: 18%; } 45%, 55% { left: 50%; } 100% { left: 82%; } }
.vz-rows{ display: grid; align-content: center; gap: 12px; padding: 0 22px; background: #16161A; }
.vz-rows .r{ display: flex; align-items: center; gap: 12px; }
.vz-rows .r b{ position: relative; flex: 1; height: 10px; overflow: hidden; border-radius: 6px; background: #26262B; }
.vz-rows .r b::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--burgundy-300); transform: scaleX(0); transform-origin: left; animation: w-fill 4s var(--ease-io) infinite; animation-delay: var(--d); }
.vz-rows .r i{ flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green-300); color: #0F0F12; font: 700 12px/1 var(--f-sans); font-style: normal; opacity: 0; animation: w-tick 4s var(--ease) infinite; animation-delay: var(--d); }
@keyframes w-fill{ 0%, 5% { transform: scaleX(0); } 30%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes w-tick{ 0%, 28% { opacity: 0; transform: scale(.4); } 34%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.vz-launch{ background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.vz-launch svg{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.vz-launch .lnp{ fill: none; stroke: var(--burgundy-200); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: vz-line 5s var(--ease-io) infinite; }
.vz-launch .ph{ position: absolute; left: 50%; top: 22px; width: 70px; height: 140px; margin-left: -35px; border-radius: 16px; background: var(--black); box-shadow: 0 20px 34px -16px rgba(0, 0, 0, .6); }
.vz-launch .ph i{ position: absolute; inset: 5px; border-radius: 12px; background: linear-gradient(170deg, var(--blush), var(--burgundy-300)); }
.vz-launch .ph::after{ content: ""; position: absolute; left: 50%; top: 9px; width: 22px; height: 6px; margin-left: -11px; border-radius: 6px; background: var(--black); }
.b-ctabox .b-ask{ display: grid; gap: 14px; width: min(720px, 100%); margin-top: 40px; }
.b-ask textarea{ display: block; width: 100%; min-height: 104px; padding: 18px 20px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: var(--white); font: 400 18px/1.5 var(--f-sans); resize: vertical; }
.b-ask textarea::placeholder{ color: rgba(255, 255, 255, .62); }
.b-ask textarea:focus{ outline: none; box-shadow: inset 0 0 0 2px var(--burgundy-200); }
.b-ask-row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.b-ask .chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.b-ask .chips button{ padding: 9px 13px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); color: var(--white); font: 500 13px/1 var(--f-sans); cursor: pointer; transition: background-color .2s, color .2s; }
.b-ask .chips button[aria-pressed="true"]{ background: var(--white); color: var(--burgundy); }
.b-way{ cursor: pointer; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.b-way:hover, .b-way:focus-visible{ transform: translateY(-4px); }
.b-way p{ padding-right: 46px; }
.b-way .go{ position: absolute; right: 20px; bottom: 24px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--wi) 10%, transparent); color: var(--wi); transition: transform .35s var(--ease), background-color .25s, color .25s; }
.b-way .go .ico{ width: 16px; height: 16px; }
.b-way:hover .go, .b-way:focus-visible .go{ transform: translateX(3px); background: var(--wa); color: var(--wc); }
.b-trust{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--burgundy-200); font: 500 13px/1.4 var(--f-mono); }
.b-trust li::before{ content: "✓ "; color: var(--green-300); }
.fr-list .tx{ min-width: 0; }
.fr-list .tx b{ overflow: hidden; height: auto; border-radius: 0; background: none; font: 700 1.2em/1.15 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.fr-list .tx em{ height: auto; border-radius: 0; background: none; color: var(--g500); font: 500 1.05em/1.1 var(--f-sans); font-style: normal; }
.b-way-btn{ all: unset; cursor: pointer; }
.b-way-btn::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.b-way:has(.b-way-btn:focus-visible){ outline: 2px solid var(--focus); outline-offset: 3px; transform: translateY(-4px); }
.b-ctabox :focus-visible{ outline-color: var(--white); }
.b-ask textarea{ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.b-ask textarea:focus{ box-shadow: inset 0 0 0 2px var(--white); }
.b-fold .hd:focus-visible{ outline-offset: -6px; outline-color: currentColor; }
.vz-rows .r b::after{ transform: none; }
.vz-rows .r i{ opacity: 1; }
.vz-launch .lnp{ stroke-dashoffset: 0; }
.b-way:not(:hover, :focus-within) .vz-w *, .b-way:not(:hover, :focus-within) .vz-w *::after{ animation: none; }
.cl-print.live .pk{ animation-iteration-count: 2; }
.b-way .go{ pointer-events: none; }
html.exploring .b-rail-nodes button span{ opacity: 0; }
@media (min-width: 901px){.b-x-stack{ --pw: min(290px, 31vh, 24vw); }}
@media (max-width: 1100px){.b-layer-x{ display: block; margin: 28px 0 0 auto; }}
.b-ctabox .b-ask{ width: min(760px, 100%); }
.b-rel-pin{ padding-top: 76px; min-height: 0; justify-content: safe center; }
.b-trust li::before{ content: "✓ "; content: "✓ " / ""; }
.b-ask-ph{ margin: 0; color: rgba(255, 255, 255, .62); font: 400 18px/1.5 var(--f-sans); }
html:not(.static) .b-card:not(:hover, :focus-within) .dv *, html:not(.static) .b-card:not(:hover, :focus-within) .dv *::after{ animation: none; }
html:not(.static) .b-card:not(:hover, :focus-within) .mk-ms .line path{ stroke-dashoffset: 0; }
html:not(.static) .b-card:not(:hover, :focus-within) .mk-bj .art .rg{ fill: var(--c); }
.b-caret{ animation-iteration-count: 4; }
.b-eng-steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.b-eng-steps li{ display: grid; align-content: start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--e1); }
.b-eng-steps span{ color: var(--hi); font: 500 13px/1 var(--f-mono); }
.b-eng-steps b{ font: 800 clamp(20px, 1.8vw, 26px)/1.2 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.b-rail-top{ display: none; }
.b-head b{ background: var(--hi); box-shadow: 0 0 0 4px var(--tint); }
.b-loglist a{ grid-template-columns: 16px minmax(0, 1fr); }
.b-loglist .ln, .b-loglist .b-tag{ grid-column: 2; }
.b-foot-bot a[href*="linkedin"]{ color: var(--mut); text-decoration: none; }
.b-foot-bot a[href*="linkedin"]:hover{ color: var(--ink); }
@media (max-width: 900px){.b-eng-steps{ grid-template-columns: minmax(0, 1fr); }}
.lean .b-how-head .b-lead, .lean .b-step p, .lean .b-fold .fb p, .lean .b-how-tool, .lean .b-card .role{ display: none; }
@media (max-width: 900px){.b-ways-grid{ grid-template-columns: minmax(0, 1fr); }}
.b-ways-grid.more .b-way{ padding-bottom: 58px; }
.b-ways-grid.more .b-way > p, .b-way-more p{ padding-right: 0; }
.b-way-more{ display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s .35s; }
.b-way-more > .in{ min-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s; }
.b-way.open .b-way-more{ grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s var(--ease), visibility 0s; }
.b-way.open .b-way-more > .in{ opacity: 1; transition: opacity .3s .05s; }
.b-way-more .who{ margin: 6px 0 0; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--wi) 14%, transparent); color: var(--wi); font: 600 17px/1.45 var(--f-sans); }
.b-way-more .txt{ padding-bottom: 14px; color: var(--wm); font: 400 16px/1.55 var(--f-sans); }
.b-way-more .txt p{ margin: 12px 0 0; color: inherit; font: inherit; text-wrap: pretty; }
.b-way-tg{ position: absolute; left: 20px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; color: var(--wa); font: 600 15px/1 var(--f-sans); }
.b-way-tg .pm{ position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--wi) 10%, transparent); color: var(--wi); transition: background-color .25s, color .25s; }
.b-way-tg .pm::before, .b-way-tg .pm::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 1px; background: currentColor; transition: transform .35s var(--ease); }
.b-way-tg .pm::after{ transform: rotate(90deg); }
.b-way.open .b-way-tg .pm::after{ transform: rotate(180deg); }
.b-way:hover .b-way-tg .pm, .b-way:focus-within .b-way-tg .pm{ background: var(--wa); color: var(--wc); }
.b-way-tg .cl, .b-way.open .b-way-tg .op{ display: none; }
.b-way.open .b-way-tg .cl{ display: inline; }
.b-way.open{ cursor: default; }
.b-way.open:hover, .b-way.open:has(.b-way-btn:focus-visible){ transform: none; }
.b-way.open .b-way-btn::after{ content: none; }
.b-way.open .b-way-tg{ cursor: pointer; }
@media (min-width: 901px){.b-ways-grid.has-open{ align-items: start; }
.b-ways-grid.has-open .b-way{ min-height: var(--way-h); }
.b-ways-grid.has-open .b-way:not(.open){ height: var(--way-h); }}
.b-ways-grid.measure{ align-items: start !important; }
.b-ways-grid.measure .b-way{ height: auto !important; min-height: 0 !important; }
@font-face{ font-family: "Nunito Fallback"; src: local("Arial Rounded MT Bold"), local("ArialRoundedMTBold"), local("Arial"); size-adjust: 102.5%; ascent-override: 98.6%; descent-override: 34.4%; line-gap-override: 0%; }
.cl-intro, .ci-skip{ display: none; }
html.intro .cl-intro, html.intro .ci-skip{ display: block; animation: ci-lift .3s 3.5s forwards; }
html.intro.run .cl-intro, html.intro.run .ci-skip{ animation: none; }
@keyframes ci-lift{ to { opacity: 0; visibility: hidden; } }
html.intro.run .b-story{ transform: translateY(16px); }
html.intro .b-look, html.intro .b-replay{ opacity: 0; visibility: hidden; }
.cl-intro{ position: fixed; z-index: 55; inset: 0; overflow: hidden; background: var(--white); contain: strict; }
.ci-room{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.ci-q{ --qf: min(120px, (min(1200px, 100vw - var(--cl) - 64px) - 40px) * .09227); position: absolute; left: var(--cl); top: calc(44% - var(--qf) * .98); margin: 0; color: var(--black); font: 900 var(--qf)/.98 "Nunito", "Nunito Fallback", sans-serif; letter-spacing: -.02em; white-space: nowrap; }
html.intro .ci-q{ visibility: hidden; }
.ci-skip{ position: fixed; z-index: 58; right: 24px; bottom: 20px; padding: 9px 14px; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .06); color: var(--mut); font: 500 12px/1 var(--f-mono); cursor: pointer; }
.ci-skip:hover{ color: var(--ink); }
.ci-phone, .ci-think, .ci-screen, .ci-doubts, .ci-hook{ position: absolute; left: 0; top: 0; }
.ci-phone, .ci-screen{ visibility: hidden; }
.ci-tilt, .ci-hold{ position: absolute; inset: 0; }
.ci-hold > svg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ci-dev{ position: absolute; left: 0; top: 0; box-shadow: inset 0 0 0 1px var(--g900); }
.ci-sb{ position: absolute; z-index: 21; top: 1.55em; left: 2.5em; right: 2.3em; display: flex; justify-content: space-between; align-items: center; color: var(--black); font: 500 1.15em/1 var(--f-mono); }
.ci-sb.inv{ color: var(--white); }
.ci-sb .bat{ display: flex; width: 2.3em; height: 1.15em; padding: .2em; border-radius: .32em; box-shadow: inset 0 0 0 .12em currentColor; }
.ci-sb .bat i{ width: 16%; border-radius: .08em; background: var(--cherry); }
.ci-feed{ position: absolute; inset: 0; }
.ci-ad{ position: absolute; left: 0; right: 0; height: 100%; display: flex; flex-direction: column; gap: 1.5em; padding: 4.6em 1.7em 2.6em; background: var(--white); color: var(--black); }
.ci-ad .top{ display: flex; align-items: center; gap: .9em; }
.ci-ad .av{ flex: none; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--g200); }
.ci-ad .top span{ display: grid; gap: .5em; }
.ci-ad .top b{ width: 7em; height: .85em; border-radius: .42em; background: var(--g100); }
.ci-ad .top em{ color: var(--g600); font: 500 1em/1 var(--f-mono); font-style: normal; }
.ci-ad .pic{ position: relative; flex: none; aspect-ratio: 27 / 24; border-radius: 1.6em; overflow: hidden; }
.ci-ad .pic svg{ display: block; width: 100%; height: 100%; }
.ci-ad h3{ margin: .1em 0 0; font: 900 2.7em/1.04 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.ci-ad .btn{ align-self: flex-start; padding: .85em 1.4em; border-radius: 99em; background: var(--black); color: var(--white); font: 600 1.25em/1 var(--f-sans); }
.ci-ad[data-tone="paper"] .pic{ box-shadow: inset 0 0 0 1px var(--g100); }
.ci-ad[data-tone="dark"]{ background: var(--g975); color: var(--white); }
.ci-ad[data-tone="dark"] .av{ background: var(--g800); }
.ci-ad[data-tone="dark"] .top b{ background: var(--g900); }
.ci-ad[data-tone="dark"] .top em{ color: var(--g400); }
.ci-ad[data-tone="dark"] .btn{ background: var(--white); color: var(--black); }
.ci-ad[data-tone="blush"]{ background: var(--blush); }
.ci-ad[data-tone="blush"] .top b{ background: rgba(255, 255, 255, .75); }
.ci-ad[data-tone="mist"]{ background: var(--g50); }
.ci-ad .car{ animation: b-blink 1.05s steps(1) infinite; }
.ci-bulb{ position: absolute; overflow: visible; }
.ci-th{ position: absolute; left: 0; top: 0; margin: 0; padding: 22px 30px 24px; border: 1.5px solid var(--g200); border-radius: 28px; background: var(--white); color: var(--black); font: 800 26px/1.22 var(--f-display); white-space: pre; visibility: hidden; }
.ci-tc{ position: absolute; left: 0; top: 0; border: 1.5px solid var(--g200); border-radius: 50%; background: var(--white); visibility: hidden; }
.ci-screen{ transform-origin: 0 0; }
.ci-bez{ position: absolute; inset: 0; padding: 14px; border-radius: 22px; background: var(--g950); }
.ci-glass{ position: relative; height: 100%; overflow: hidden; border-radius: 10px; background: var(--white); }
.ci-win{ --lh: 19px; --qt: 56px; --qr: 14px; --at: 118px; --ab: 54px; --al: 16px; --ar: 24px; position: absolute; overflow: hidden; color: var(--g900); font: 400 13px/var(--lh) var(--f-sans); visibility: hidden; }
.ci-win .mk{ position: absolute; top: 16px; left: 16px; width: 20px; height: 20px; }
.ci-win .mk.m1{ left: 50%; display: flex; gap: 5px; align-items: center; justify-content: center; width: 24px; margin-left: -12px; }
.ci-win .mk.m1 i{ width: 6px; height: 6px; border-radius: 50%; background: var(--black); }
.ci-win .mk.m5{ left: 50%; margin-left: -10px; }
.ci-win .q{ position: absolute; top: var(--qt); right: var(--qr); max-width: min(72%, 560px); margin: 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--burgundy); color: var(--white); font: 400 13px/1.38 var(--f-sans); }
.ci-win .ans{ position: absolute; left: var(--al); right: var(--ar); top: var(--at); bottom: var(--ab); overflow: hidden; }
.ci-win .ln{ height: var(--lh); margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; visibility: hidden; }
.ci-win .ln.last{ display: -webkit-box; height: auto; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ci-win .ln.ph{ color: var(--black); font-weight: 650; }
.ci-win .last{ color: var(--g600); }
.ci-win.lit .last{ color: var(--black); font-weight: 600; }
.ci-win .sb{ position: absolute; top: var(--at); bottom: var(--ab); right: 8px; width: 3px; border-radius: 2px; background: rgba(0, 0, 0, .05); }
.ci-win .sb b{ display: block; height: 100%; border-radius: inherit; background: var(--g400); transform-origin: 50% 0; }
.ci-win .cmp{ position: absolute; left: 12px; right: 12px; bottom: 10px; height: 32px; display: flex; gap: 8px; }
.ci-win .cmp i{ flex: 1; border-radius: 10px; background: var(--g50); }
.ci-win .cmp b{ flex: none; display: grid; place-items: center; width: 32px; border-radius: 9px; background: var(--g100); color: var(--black); }
.ci-win .cmp b svg{ width: 14px; height: 14px; }
.ci-win.big{ --lh: 27px; --qt: 72px; --qr: max(32px, calc(50% - 380px)); --at: 150px; --ab: 128px; --al: max(32px, calc(50% - 380px)); --ar: max(40px, calc(50% - 380px)); inset: 0; font-size: 17px; transform-origin: 0 0; }
.ci-win.big .mk.m1{ top: 26px; gap: 6px; width: 26px; margin-left: -13px; }
.ci-win.big .mk.m1 i{ width: 7px; height: 7px; }
.ci-win.big .q{ max-width: min(60%, 640px); padding: 12px 18px; border-radius: 20px 20px 6px 20px; font-size: 17px; }
.ci-win.big .sb{ right: 14px; }
.ci-win.big .cmp{ left: max(32px, calc(50% - 380px)); right: max(32px, calc(50% - 380px)); bottom: 48px; height: 56px; gap: 10px; }
.ci-win.big .fld{ position: relative; flex: 1; overflow: hidden; border-radius: 16px; background: var(--g50); }
.ci-win.big .sl{ position: absolute; left: 20px; top: 0; bottom: 0; display: flex; align-items: center; white-space: pre; color: var(--black); }
.ci-win.big .car{ width: 2px; height: 22px; margin-left: 1px; background: var(--black); animation: b-blink 1.05s steps(1) infinite; }
.ci-win.big .car.solid{ animation: none; }
.ci-win.big .cmp b{ width: 56px; border-radius: 15px; }
.ci-win.big .cmp b svg{ width: 20px; height: 20px; }
.ci-win[data-s="1"]{ background: var(--white); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--g100); }
.ci-win.big[data-s="1"]{ border-radius: 0; box-shadow: none; }
.ci-win[data-s="2"]{ background: var(--g950); border-radius: 14px; color: var(--g100); font-family: var(--f-mono); font-size: 12px; }
.ci-win[data-s="2"] .ln.ph, .ci-win[data-s="2"].lit .last{ color: var(--white); }
.ci-win[data-s="2"] .last{ color: var(--g400); }
.ci-win[data-s="2"] .sb{ background: rgba(255, 255, 255, .07); }
.ci-win[data-s="2"] .sb b{ background: var(--g600); }
.ci-win[data-s="2"] .cmp{ left: 0; right: 0; bottom: 0; height: 40px; padding: 6px 8px 6px 12px; background: var(--g900); }
.ci-win[data-s="2"] .cmp i{ background: none; }
.ci-win[data-s="2"] .cmp b{ width: 28px; border-radius: 7px; background: var(--g800); color: var(--g200); }
.ci-win[data-s="3"]{ --al: calc(22% + 14px); background: var(--blush-50); border-radius: 24px; }
.ci-win[data-s="3"] .side{ position: absolute; left: 0; top: 0; bottom: 0; width: 22%; display: grid; align-content: start; gap: 9px; padding: 48px 12px 0; background: var(--white); }
.ci-win[data-s="3"] .side i{ height: 8px; border-radius: 4px; background: var(--g100); }
.ci-win[data-s="3"] .mk{ left: 12px; }
.ci-win[data-s="3"] .cmp{ left: calc(22% + 12px); }
.ci-win[data-s="3"] .cmp i{ background: var(--white); box-shadow: inset 0 0 0 1px var(--g100); }
.ci-win[data-s="4"]{ background: var(--white); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--g100); }
.ci-win[data-s="4"] .band{ position: absolute; left: 0; right: 0; top: 0; height: 44px; background: var(--g50); }
.ci-win[data-s="4"] .mk{ top: 12px; left: 18px; }
.ci-win[data-s="4"] .ln.ph{ font: 800 13.5px/var(--lh) var(--f-display); }
.ci-win[data-s="4"] .cmp i{ border-radius: 14px; background: var(--g50); }
.ci-win[data-s="5"]{ --al: 12px; --ar: 20px; background: var(--g50); border-radius: 10px; }
.ci-win[data-s="5"] .ans{ padding: 0 10px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--g100); }
.ci-win[data-s="6"]{ background: var(--g975); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--g900); color: var(--g200); }
.ci-win[data-s="6"] .ln.ph, .ci-win[data-s="6"].lit .last{ color: var(--white); }
.ci-win[data-s="6"] .last{ color: var(--g400); }
.ci-win[data-s="6"] .sb{ background: rgba(255, 255, 255, .07); }
.ci-win[data-s="6"] .sb b{ background: var(--g600); }
.ci-win[data-s="6"] .cmp i{ background: var(--g950); }
.ci-win[data-s="6"] .cmp b{ background: var(--g900); color: var(--g200); }
.ci-win.tight .mk{ top: 12px; }
.ci-win.tight .q{ max-width: 86%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ci-win.tight[data-s="3"] .q{ max-width: calc(78% - 28px); }
.ci-win.tight[data-s="4"] .band{ height: 36px; }
.ci-win.tight[data-s="4"] .mk{ top: 8px; }
.ci-win.nocmp .cmp{ display: none; }
.ci-db{ position: absolute; left: 0; top: 0; margin: 0; padding: .42em 1em .46em; border: 1.5px solid var(--g200); border-radius: 1.1em; background: var(--white); color: var(--black); font: 800 var(--df, 24px)/1.2 var(--f-display); white-space: nowrap; visibility: hidden; }
.ci-dc{ position: absolute; left: 0; top: 0; border: 1.5px solid var(--g200); border-radius: 50%; background: var(--white); visibility: hidden; }
.ci-hk{ position: absolute; left: 0; top: 0; margin: 0; color: var(--black); font: 900 var(--hf, 46px)/1.12 var(--f-display); letter-spacing: -.02em; white-space: nowrap; visibility: hidden; }
.ci-hk em, .ci-hk.hi{ color: var(--burgundy); font-style: normal; }
html.nofilm .b-replay{ display: none; }
html.intro.run.intro-p .b-nav{ background: #FFF; }
html.intro.run{ overscroll-behavior-y: none; }
.cl-intro{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ci-bg, .ci-app{ display: none; }
.ci-sa{ position: absolute; left: 0; bottom: 0; width: 0; height: env(safe-area-inset-bottom, 0px); visibility: hidden; }
html.intro-p .cl-intro{ background: none; }
html.intro-p .ci-bg{ display: block; position: absolute; inset: 0; background: #FFF; }
html.intro-p .ci-app{ display: block; position: absolute; left: 0; top: 0; visibility: hidden; }
html.intro-p .ci-app .dev-phone{ max-width: none; }
html.intro-p .ci-q{ --qf: min(96px, (100vw + -40px) / 6.7); left: 24px; top: 144px; }
html.intro.intro-p .ci-skip{ right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 40px; padding: 0 16px; font-size: 13px; line-height: 40px; background: rgba(255, 255, 255, .94); box-shadow: inset 0 0 0 1px #D7D7DA; transition: background-color .2s, color .2s, box-shadow .2s; }
html.intro.intro-p .ci-skip::after{ content: ""; position: absolute; inset: -4px; }
html.intro.intro-p .ci-skip.hint{ background: #000; color: #FFF; box-shadow: none; transition: none; }
html.intro-p .ci-th{ padding: .73em .91em .82em; border-radius: 22px; font-size: var(--tf, 22px); }
html.intro-p .ci-db{ padding: .47em .93em .53em; border-radius: 1.2em; font-size: var(--df, 18px); }
@media (max-width: 599px){html.intro-p .ci-hk{ white-space: pre; }}
html.intro-p .ci-ad .top em{ font-size: max(1em, 11px); }
html.intro-p .ci-ad .btn{ font-size: max(1.25em, 12px); }
html.intro-p .ci-sb{ font-size: max(1.15em, 11px); }
html.intro-p .ci-win.big{ --lh: 24px; --qt: 58px; --qr: calc(50% + var(--bc) / -2); --al: calc(50% + var(--bc) / -2); --ar: calc(50% + var(--bc) / -2 + 8px); font-size: 16px; }
html.intro-p .ci-win.big .mk.m1{ top: 22px; }
html.intro-p .ci-win.big .q{ max-width: calc(var(--bc) * .82); padding: 10px 14px; border-radius: 18px 18px 5px 18px; font-size: 16px; }
html.intro-p .ci-win.big .sb{ right: calc(50% + var(--bc) / -2 + -6px); }
html.intro-p .ci-win.big .cmp{ left: calc(50% + var(--bc) / -2); right: calc(50% + var(--bc) / -2); bottom: 24px; height: 94px; }
html.intro-p .ci-win.big .fld{ border-radius: 18px; }
html.intro-p .ci-win.big .sl{ left: 16px; right: 16px; top: 14px; bottom: 14px; display: block; white-space: pre-wrap; line-height: 22px; }
html.intro-p .ci-win.big .car{ display: inline-block; vertical-align: -4px; height: 20px; }
html.intro-p .ci-win.big .cmp b{ align-self: flex-end; width: 44px; height: 44px; border-radius: 13px; }
html.intro-p .ci-win.pc{ --lh: 15px; --ar: 14px; font-size: 11px; }
html.intro-p .ci-win.pc .mk{ top: 10px; width: 16px; height: 16px; }
html.intro-p .ci-win.pc .mk.m1{ width: 20px; margin-left: -10px; }
html.intro-p .ci-win.pc .q{ max-width: 86%; padding: 5px 9px; border-radius: 10px 10px 3px 10px; font-size: 11.5px; }
html.intro-p .ci-win.pc .ln.last{ font-size: var(--of, 13.5px); line-height: calc(var(--of, 13.5px) + 4px); font-weight: 600; -webkit-line-clamp: 3; }
html.intro-p .ci-win.pc.short .mk{ top: 7px; }
html.intro-p .ci-win.pc[data-s="2"]{ font-size: 10.5px; }
html.intro-p .ci-win.pc[data-s="2"] .ln.last{ font-family: var(--f-sans); }
html.intro-p .ci-win.pc[data-s="3"]{ --al: calc(10% + 8px); }
html.intro-p .ci-win.pc[data-s="3"] .side{ width: 10%; padding: 34px 5px 0; gap: 7px; }
html.intro-p .ci-win.pc[data-s="3"] .side i{ height: 6px; }
html.intro-p .ci-win.pc.tight[data-s="3"] .q{ max-width: calc(86% + -16px); }
html.intro-p .ci-win.pc.tight[data-s="4"] .band{ height: 30px; }
html.intro-p .ci-win.pc.tight[data-s="4"] .mk{ top: 7px; left: 14px; }
html.intro-p .ci-win.pc.short[data-s="4"] .band{ height: 24px; }
html.intro-p .ci-win.pc.short[data-s="4"] .mk{ top: 4px; }
html.intro-p .ci-win.pc[data-s="4"] .ln.ph{ font-size: 11.5px; }
html.intro-p .ci-win.pc[data-s="5"]{ --al: 8px; --ar: 14px; }
html.intro-p .ci-win.pc[data-s="5"] .ans{ padding: 0 6px; }
html.intro-p .ci-win.pc.tiny .mk, html.intro-p .ci-win.pc.tiny[data-s="4"] .mk{ top: 13px; left: 10px; margin-left: 0; }
html.intro-p .ci-win.pc.tiny .q, html.intro-p .ci-win.pc.tiny[data-s="3"] .q{ max-width: calc(100% + -44px); }
html.intro-p .ci-win.pc.tiny[data-s="3"] .side{ padding-top: 42px; }
html.intro-p .ci-win.pc.tiny[data-s="4"] .band{ height: 42px; }
.b-hero-sub:has(+ .b-hero-range){ margin-bottom: 14px; }
.b-hero-range{ max-width: 34em; margin: 0 0 40px; color: var(--mut); font: 400 18px/1.55 var(--f-sans); text-wrap: pretty; }
@media (max-width: 900px){.b-hero-range{ font-size: 17px; }}
.b-hero-range.b-hero-hold{ visibility: hidden; margin: 14px 0 0; }
@media (max-width: 900px){.b-hero-hold{ display: none; }}
.b-ly.top .mk-fr{ -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.b-ly.top .fr-chips span, .b-ly.top .fr-list .it, .b-ly.top .fr-btn, .b-ly.top .fr-sheet .sv, .b-ly.top .fr-dim.on{ cursor: pointer; }
.fr-dim, .fr-note{ pointer-events: none; }
.fr-dim.on{ pointer-events: auto; }
.fr-chips span{ transition: background-color .2s, color .2s; }
.fr-ck{ transition: background-color .2s, border-color .2s; }
.fr-ck svg{ transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.fr-ck.on{ background: var(--burgundy); border-color: var(--burgundy); }
.fr-ck.on svg{ transform: scale(1); }
.fr-none{ margin: 1.6em 0 0; color: var(--g500); font: 600 1.2em/1.2 var(--f-sans); text-align: center; }
.b-adm{ display: none; }
@media (min-width: 1100px){.b-adm{ --pw: min(290px, 31vh, 24vw); display: flex; position: absolute; left: -16px; right: calc(24px + var(--cl) + min(1200px, 100vw + var(--cl) * -1 + -64px) + -100vw);
    top: calc((min(660px, 74vh) + var(--pw) * -620 / 300) / 2 + -7em); width: auto; height: 32.5em; max-width: 66em; aspect-ratio: auto;
    font-size: calc(var(--pw) / 30); pointer-events: none; transition: opacity .4s .9s, visibility 0s .9s;
    --hl: calc((min(1200px, 100vw + var(--cl) * -1 + -64px) + -40px) * .75 / 4.4 + 4px + -20.3em);
    --hr: calc((min(1200px, 100vw + var(--cl) * -1 + -64px) + -40px) * .75 / 4.4 + 28px + 9.7em); }
html.exploring .b-adm{ opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }}
.b-adm .ad{ display: grid; grid-template-columns: 3.8em minmax(0, 1fr); height: 100%; color: var(--g600); font-family: var(--f-sans); }
.b-adm aside{ display: flex; flex-direction: column; align-items: center; gap: .9em; padding-top: 1.2em; background: var(--g50); border-right: 1px solid var(--g100); color: var(--g400); }
.b-adm .lg{ width: 2.2em; height: 2.2em; margin-bottom: .4em; border-radius: .7em; background: linear-gradient(140deg, var(--cherry), var(--burgundy)); }
.b-adm aside span{ display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .8em; }
.b-adm aside span.on{ background: var(--blush); color: var(--burgundy); }
.b-adm aside .ico{ width: 1.5em; height: 1.5em; }
.b-adm .mn{ min-width: 0; padding: 1.3em 1.5em 0; }
.b-adm .hd{ display: flex; align-items: baseline; gap: 1em; white-space: nowrap; }
.b-adm .hd b{ color: var(--black); font: 900 1.8em/1 var(--f-display); letter-spacing: -.01em; }
.b-adm .hd .dt{ color: var(--g500); font: 500 .95em/1 var(--f-mono); }
.b-adm .hd .st{ font: 500 1.05em/1 var(--f-sans); }
.b-adm .hd .first{ margin-left: auto; }
.b-adm .hd em{ color: var(--black); font-style: normal; font-weight: 800; }
.b-adm .th, .b-adm .r, .b-adm .dl{ display: grid; grid-template-columns: 1.5em max(0px, var(--hl) + -1.5em) max(0px, var(--hr) + -1 * max(var(--hl), 1.5em)) minmax(0, 1fr); align-items: center; }
.b-adm .l{ grid-column: 2; display: flex; align-items: center; min-width: 0; padding-left: 1em; container: adm-l / inline-size; }
.b-adm .x{ grid-column: 4; min-width: 0; container: adm-x / inline-size; }
.b-adm .x > div{ display: grid; grid-template-columns: 5em 5.4em 7.4em; justify-content: end; align-items: center; column-gap: 1em; }
@container adm-l (width < 4.4em){ .b-adm .l > * { display: none; } }
@container adm-x (width < 19.8em){ .b-adm .x > div { grid-template-columns: 5.4em 7.4em; } .b-adm .x .room { display: none; } }
@container adm-x (width < 13.8em){ .b-adm .x > div { grid-template-columns: minmax(0, 7.4em); } .b-adm .x .stay { display: none; } }
@container adm-x (width < 6.2em){ .b-adm .x > div { display: none; } }
.b-adm .th{ margin-top: 1.6em; padding-bottom: .7em; border-bottom: 1px solid var(--g100); color: var(--g500); }
.b-adm .th span{ font: 500 .88em/1 var(--f-mono); }
.b-adm .th .x span:last-child{ text-align: right; }
.b-adm .r{ padding: .65em 0; border-bottom: 1px solid var(--g100); white-space: nowrap; }
.b-adm .r .sw{ width: 1.5em; height: 1.5em; border-radius: .45em; }
.b-adm .r b, .b-adm .r span{ overflow: hidden; font: 500 1.05em/1.2 var(--f-sans); text-overflow: ellipsis; }
.b-adm .r b{ color: var(--black); font-weight: 650; }
.b-adm .r em{ justify-self: end; padding: .42em .75em; border-radius: 99em; font: 600 .95em/1 var(--f-sans); font-style: normal; }
.b-adm .r em.pd{ background: rgba(31, 122, 76, .1); color: var(--green); }
.b-adm .r em.due{ background: rgba(178, 106, 0, .1); color: var(--amber); }
.b-adm .dl{ margin: 1.056em 0 0; padding-bottom: .528em; border-bottom: 1px solid var(--g100); color: var(--g500); }
.b-adm .dl span{ grid-column: 1 / -1; font: 500 .88em/1 var(--f-mono); }
.ck{ width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: var(--green-300); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.b-case .b-cta{ padding-block: 0 120px; }
.b-case-hero .mk-ad aside .it[data-v13]{ cursor: pointer; transition: background-color .2s, color .2s; }
.b-case-hero .mk-ad aside .it[data-v13]:not(.on):hover{ background: rgba(255, 255, 255, .65); color: var(--burgundy); }
@media (max-width: 900px){.b-case .b-cta{ padding-bottom: 88px; }}
.b-eng-more{ margin: 36px 0 0; }
.b-bike-head h1{ font-size: clamp(40px, 5.4vw, 80px); line-height: .96; letter-spacing: -.028em; white-space: pre-line; text-wrap: balance; }
.b-bike-head .b-lead{ max-width: 600px; margin-top: 30px; }
.b-bike-head .b-hero-cta{ align-items: center; gap: 14px 28px; margin-top: 40px; }
.b-bike-does, .b-bike-proof{ position: relative; padding-top: 140px; }
.b-bike .b-steps{ margin-top: 64px; }
.lean .b-bike .b-step p{ display: block; }
.b-bike-box{ margin-top: 24px; padding: 20px 22px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--e1); opacity: .35; transition: opacity .5s var(--ease); }
.b-step.lit .b-bike-box, .static .b-bike-box{ opacity: 1; }
.b-bike-pts{ display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.b-bike-pts li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font: 500 16px/1.45 var(--f-sans); }
.b-bike-pts .bf-ck{ margin-top: 2px; background: var(--ok); }
.b-bike-pts .bf-ck svg{ stroke: var(--page); }
@media (min-width: 1100px){.b-bike-st{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 56px; align-items: start; }
.b-bike-st > h3{ grid-column: 1 / -1; }
.b-bike-box{ grid-column: 2; grid-row: 2; margin-top: 14px; }}
.b-step .b-bike-nx, .b-bike-soon{ position: relative; color: var(--mut); }
.b-step .b-bike-nx{ margin-top: 16px; padding: 12px 0 0 27px; border-top: 1px dashed var(--e2); font: 400 15px/1.45 var(--f-sans); }
.b-bike-nx::before, .b-bike-soon::before{ content: ""; position: absolute; left: 1px; top: 15px; width: 15px; height: 15px; border: 1.5px dashed var(--e3); border-radius: 50%; box-sizing: border-box; }
.b-bike-gets{ gap: 40px 28px; margin-top: 56px; }
.b-bike-gets li{ gap: 12px; padding-top: 22px; }
.b-bike-gets .plus{ display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); font: 600 18px/1 var(--f-mono); }
.b-bike-gets p{ margin: 0; color: var(--mut); font: 400 17px/1.5 var(--f-sans); text-wrap: pretty; }
.b-bike-made{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.b-bike-made .b-card{ width: auto; height: auto; }
.b-bike-made .b-card:first-child{ grid-column: 1 / -1; }
.b-bike-solo{ grid-template-columns: minmax(0, 1fr); align-items: start; }
.b-bike-soon{ max-width: 760px; margin: 88px 0 0; padding-left: 40px; font: 800 clamp(22px, 2.1vw, 30px)/1.3 var(--f-display); letter-spacing: -.012em; text-wrap: balance; }
.b-bike-soon::before{ top: calc(.65em + -11px); width: 22px; height: 22px; border-width: 2px; }
@media (max-width: 900px){.b-bike-does, .b-bike-proof{ padding-top: 100px; }
.b-bike-made{ grid-template-columns: minmax(0, 1fr); }
.b-bike-soon{ margin-top: 64px; padding-left: 34px; }}
.b-bike-why{ position: relative; padding-top: 140px; }
.b-bike-whys{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; }
.b-bike-whys li{ display: grid; align-content: start; gap: 12px; padding: 26px 26px 30px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--e1); }
.b-bike-whys .mk{ display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: var(--tint); color: var(--hi); }
.b-bike-whys .mk .ico{ width: 22px; height: 22px; }
.b-bike-whys h3{ margin: 0; font: 900 clamp(24px, 2.2vw, 32px)/1.06 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.b-bike-whys p{ margin: 0; color: var(--mut); font: 400 17px/1.5 var(--f-sans); text-wrap: pretty; }
@media (max-width: 900px){.b-bike-why{ padding-top: 100px; }
.b-bike-whys{ grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }}
.b-ride{ --bw: 120px; --rw: 10px; --pw: 52px; --sky: 116px; --frame: var(--burgundy-300); --wheel: #D7D7DA; position: relative; margin-top: clamp(36px, 6.4vh, 64px); }
html[data-theme="light"] .b-ride{ --frame: var(--burgundy-400); --wheel: #55555C; }
.b-ride ~ .b-eng-close{ display: none; }
.b-ride ~ .b-eng-more{ margin-top: 44px; }
.br-road{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.br-road .rd{ fill: none; stroke: var(--s2); stroke-width: var(--rw); stroke-linecap: round; stroke-linejoin: round; }
.br-road .ln{ fill: none; stroke: var(--e3); stroke-width: 1.5; stroke-dasharray: 5 9; stroke-linecap: round; }
.br-fill{ position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--hi); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.br-nds i{ position: absolute; z-index: 1; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 2px var(--node); pointer-events: none; }
.br-nds i::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--hi); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.br-nds i:last-child::after{ background: var(--ok); }
.br-nds i.on::after{ opacity: 1; transform: none; }
.br-stops{ position: relative; display: grid; grid-template-columns: 104px repeat(3, minmax(0, 1fr)) 150px; gap: 0 clamp(20px, 2.6vw, 40px); margin: 0; padding: var(--sky) 0 0; list-style: none; }
.br-stops > li{ position: relative; min-width: 0; padding-top: 30px; }
.br-pt{ position: absolute; left: 8px; top: 0; width: 0; height: 0; pointer-events: none; }
.br-a > .br-pt[data-k="b"]{ left: 0; }
.br-a > .br-pt[data-k="a"]{ left: calc(var(--bw) * .5 + 4px); }
.br-z > .br-pt[data-k="v"]{ display: none; }
.br-z > .br-pt[data-k="e"]{ left: calc(8px + var(--bw) * .44 + 16px + var(--pw) + 10px); }
.br-a > b{ display: block; font: 700 16px/1.3 var(--f-sans); }
.br-n{ display: block; color: var(--hi); font: 500 13px/1 var(--f-mono); }
.br-tx h3{ margin: 12px 0 0; font: 900 clamp(19px, 1.8vw, 26px)/1.12 var(--f-display); letter-spacing: -.012em; text-wrap: balance; }
.br-tx p{ max-width: 300px; margin: 8px 0 0; color: var(--mut); font: 400 16px/1.5 var(--f-sans); text-wrap: pretty; }
.br-dev{ position: absolute; left: calc(8px + var(--bw) * .44 + 16px); bottom: calc(100% + var(--rw) / 2 + 3px); display: grid; align-content: start; gap: 5px; width: var(--pw); height: calc(var(--pw) * 1.8); padding: 9px 7px; border-radius: 12px; background: #F6F6F8; box-shadow: 0 0 0 3px #000, 0 0 0 4.5px var(--e2), 0 16px 28px -14px rgba(0, 0, 0, .55); }
.br-dev i{ display: block; height: 5px; border-radius: 2px; background: #D7D7DA; }
.br-dev i:first-child{ height: 22px; border-radius: 5px; background: var(--burgundy); }
.br-dev i:nth-child(3){ width: 72%; }
.br-dev i:nth-child(4){ width: 56%; }
.br-dev em{ display: block; width: 66%; height: 11px; margin-top: 4px; border-radius: 6px; background: #000; }
.br-live{ position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font: 600 15px/1 var(--f-sans); }
.br-live::before, .br-live::after{ content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.br-live::after{ position: absolute; left: 10px; top: 50%; margin-top: -4px; opacity: 0; }
.br-rider{ position: absolute; z-index: 2; left: 0; top: 0; width: var(--bw); pointer-events: none; will-change: transform; }
.br-rider .bike{ display: block; width: 100%; height: auto; overflow: visible; }
.br-rider .bike circle, .br-rider .bike path{ fill: none; stroke: var(--wheel); stroke-width: 2.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.br-rider .bike .fr{ stroke: var(--frame); }
.br-rider .bike .hb{ fill: var(--page); stroke: var(--frame); }
.br-tile{ position: absolute; left: 40.67%; bottom: 79%; display: grid; place-items: center; width: 30%; aspect-ratio: 1; margin-left: -15%; border-radius: 28%; background: var(--blush); box-shadow: 0 8px 16px -8px rgba(90, 15, 46, .5); transform: rotate(5deg); transform-origin: 50% 100%; }
.br-tile .ico{ width: 62%; height: 62%; color: var(--burgundy); stroke-width: 2.1; }
.b-ride.rolling .br-tx, .b-ride.rolling .br-dev, .b-ride.rolling .br-live{ transition: opacity .45s var(--ease); }
.b-ride.rolling .br-st:not(.lit) .br-tx{ opacity: .3; }
.b-ride.rolling .br-z:not(.lit) .br-dev, .b-ride.rolling .br-z:not(.lit) .br-live{ opacity: .4; }
.b-ride.rolling .br-z.lit .br-dev{ animation: br-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
.b-ride.rolling .br-z.lit .br-live::after{ animation: br-ring 1.2s ease-out .1s both; }
@keyframes br-pop{ from { transform: scale(.88); } }
@keyframes br-ring{ from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
@media (min-width: 901px) and (max-width: 1199px){.b-ride{ --bw: 90px; --sky: 92px; --pw: 44px; }
.br-stops{ grid-template-columns: 86px repeat(3, minmax(0, 1fr)) 126px; }
.br-tx p{ font-size: 15px; }}
@media (max-width: 900px){.b-ride{ --bw: 62px; --rw: 8px; --pw: 42px; margin-top: 44px; }
.b-ride ~ .b-eng-more{ margin-top: 36px; }
.br-fill{ display: none; }
.br-nds i{ width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.br-stops{ display: block; padding: 0; }
.br-stops > li{ padding: 0; }
.br-a{ height: 88px; }
.br-a > .br-pt{ top: 100%; }
.br-a > .br-pt[data-k="a"]{ left: calc(var(--bw) * .5 + 16px); }
.br-tx{ width: 60%; }
.br-st[data-i="1"] .br-tx{ margin-left: auto; }
.br-st > .br-pt{ top: 50%; left: auto; right: -2px; }
.br-st[data-i="1"] > .br-pt{ left: -2px; right: auto; }
.br-tx h3{ margin-top: 8px; font-size: 20px; }
.br-tx p{ margin-top: 6px; font-size: 15px; }
.br-stops > .br-z{ padding-top: calc(var(--pw) * 1.8 + 30px); }
.br-z > .br-pt{ top: calc(var(--pw) * 1.8 + 4px + var(--rw) / 2); }
.br-z > .br-pt[data-k="v"]{ display: block; left: calc(var(--pw) + 16px + var(--bw) * .44 + 72px); }
.br-z > .br-pt[data-k="z"]{ left: calc(var(--pw) + 16px + var(--bw) * .44); }
.br-z > .br-pt[data-k="e"]{ left: 0; }
.br-dev{ left: 3px; top: 0; bottom: auto; padding: 8px 6px; gap: 4px; border-radius: 10px; }
.br-dev i:first-child{ height: 18px; }}
@keyframes m12-in{ from { opacity: 0; transform: translateY(.6em) scale(.97); } }
@keyframes m12-ring{ from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
@keyframes m12-draw{ from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes m12-down{ from { transform: translateY(0); opacity: 0; } 18%, 82% { opacity: 1; } to { transform: translateY(var(--h)); opacity: 0; } }
@keyframes m12-up{ from { transform: translateY(var(--h)); opacity: 0; } 18%, 82% { opacity: 1; } to { transform: translateY(0); opacity: 0; } }
@keyframes m12-tap{ from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.4, 1.9); } }
@keyframes m12-glow{ 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 122, 76, 0); } 40% { box-shadow: 0 0 0 .5em rgba(31, 122, 76, .18); } }
.mk-cy12 .nt12{ position: relative; flex: none; }
.mk-cy12 .pin12{ position: absolute; z-index: 3; display: grid; place-items: center; width: 2.3em; height: 2.3em; margin-top: -2.3em; border-radius: 50% 50% 50% .2em; background: var(--c); box-shadow: 0 0 0 .18em var(--white), 0 .45em .9em -.3em rgba(42, 7, 20, .45); color: var(--white); font: 700 1em/1 var(--f-sans); font-style: normal; transform-origin: 0 100%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.mk-cy12 .pin12.nw::after{ content: ""; position: absolute; left: -.35em; bottom: -.35em; width: .7em; height: .7em; border-radius: 50%; box-shadow: 0 0 0 .14em var(--c); opacity: 0; }
.mk-cy12.on12[data-s12="pin"] .pin12.nw::after{ animation: m12-ring .9s ease-out both; }
.mk-cy12 .bub12{ position: absolute; z-index: 2; width: 12.6em; padding: .8em .95em .85em; border-radius: 1em; background: var(--white); box-shadow: 0 .7em 1.6em -.7em rgba(42, 7, 20, .3), 0 0 0 1px var(--g100); transition: opacity .35s, transform .45s var(--ease); }
.mk-cy12 .bub12.l{ right: calc(100% + 1.2em); border-top-right-radius: .25em; }
.mk-cy12 .bub12.r{ left: calc(100% + 1.2em); border-top-left-radius: .25em; }
.mk-cy12 .bub12 .hd{ display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.mk-cy12 .bub12 .hd b{ display: inline-flex; align-items: center; gap: .4em; font: 700 1em/1 var(--f-sans); }
.mk-cy12 .bub12 .hd b::before{ content: ""; width: .65em; height: .65em; border-radius: 50%; background: var(--c); }
.mk-cy12 .bub12 .hd em, .mk-cy12 .nl12 em{ padding: .3em .55em; border-radius: 99em; background: var(--blush); color: var(--burgundy); font: 600 .8em/1 var(--f-mono); font-style: normal; }
.mk-cy12 .bub12 .hd em{ margin-left: auto; }
.mk-cy12 .bub12.ds .hd em, .mk-cy12 .nl12 em.ds{ background: rgba(178, 106, 0, .12); color: var(--amber); }
.mk-cy12 .bub12 p{ margin: .45em 0 0; color: var(--black); font: 500 1em/1.35 var(--f-sans); }
.mk-cy12 .bub12 small{ display: block; margin-top: .45em; color: var(--green); font: 600 .82em/1 var(--f-mono); transition: opacity .3s; }
.mk-cy12 .cur12{ left: 72%; top: 83%; }
.mk-cy12 .fl12{ display: flex; gap: .4em; }
.mk-cy12 .fl12 span{ padding: .45em .75em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--g200); color: var(--g600); font: 600 .9em/1 var(--f-sans); }
.mk-cy12 .fl12 span.on{ background: var(--black); color: var(--white); box-shadow: none; }
.mk-cy12 .nl12{ display: flex; gap: .7em; max-height: 10em; padding: .8em .85em; overflow: hidden; border-radius: .9em; box-shadow: inset 0 0 0 1px var(--g100); transition: max-height .55s var(--ease), padding .55s var(--ease), margin .55s var(--ease), opacity .4s; }
.mk-cy12 .nl12.nw{ background: var(--blush-50); box-shadow: inset 0 0 0 .14em var(--burgundy-600); }
.mk-cy12 .nl12 > i{ flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; color: var(--white); font: 700 .9em/1 var(--f-sans); font-style: normal; }
.mk-cy12 .nl12 > span{ flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4em .5em; }
.mk-cy12 .nl12 b{ overflow: hidden; font: 700 1em/1.1 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.mk-cy12 .nl12 b small{ margin-left: .4em; color: var(--g500); font: 500 .85em/1 var(--f-sans); }
.mk-cy12 .nl12 p{ grid-column: 1 / -1; margin: 0; color: var(--black); font: 500 .95em/1.35 var(--f-sans); }
.mk-cy12 .nl12 > span > small{ grid-column: 1 / -1; color: var(--g500); font: 500 .8em/1 var(--f-mono); }
.mk-cy12:is([data-s12="start"], [data-s12="aim"]) .pin12.nw{ transform: scale(0); }
.mk-cy12:is([data-s12="start"], [data-s12="aim"], [data-s12="pin"]) .bub12.nw{ opacity: 0; transform: translateY(.6em) scale(.97); }
.mk-cy12:is([data-s12="start"], [data-s12="aim"], [data-s12="pin"], [data-s12="write"]) .bub12.nw small{ opacity: 0; }
.mk-cy12[data-s12="write"] .bub12.nw p::after{ content: ""; display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: var(--burgundy); animation: mk-caret 1s steps(1) infinite; }
.mk-cy12:is([data-s12="start"], [data-s12="aim"], [data-s12="pin"], [data-s12="write"]) .nl12.nw{ max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -.65em; opacity: 0; }
.mk-cy12:is([data-s12="start"], [data-s12="leave"]) .cur12{ transform: translate(5em, 6em); }
.mk-ad .bd12{ display: grid; place-items: center; min-width: 1.7em; height: 1.7em; margin-left: auto; padding: 0 .45em; border-radius: 99em; background: var(--cherry); color: var(--white); font: 700 .8em/1 var(--f-sans); font-style: normal; opacity: 0; transform: scale(0); transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.mk-ad[data-s12~="msg"] .bd12{ opacity: 1; transform: none; }
.mk-ad .rw.nw12{ max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; overflow: hidden; opacity: 0; transition: max-height .55s var(--ease), padding .55s var(--ease), opacity .4s; }
.mk-ad[data-s12~="msg"] .rw.nw12{ max-height: 3.6em; padding-top: .7em; padding-bottom: .7em; border-top-width: 1px; opacity: 1; background: linear-gradient(90deg, var(--blush-50), rgba(253, 244, 247, 0)); }
.mk-ad[data-v12="over"] main{ position: relative; }
.mk-ad [data-e12] .tag{ transition: background-color .35s, color .35s; }
.mk-ad .ts12{ position: absolute; right: 1.8em; bottom: 1.5em; display: flex; align-items: center; gap: .7em; padding: .7em 1.1em .7em .7em; border-radius: 1.1em; background: var(--g950); color: var(--white); box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .55); opacity: 0; transform: translateY(1em); transition: opacity .35s, transform .5s var(--ease); }
.mk-ad .ts12 > i{ display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .8em; background: var(--burgundy); }
.mk-ad .ts12 .ico{ width: 1.2em; height: 1.2em; }
.mk-ad .ts12 b{ display: block; font: 700 1em/1.1 var(--f-sans); }
.mk-ad .ts12 small{ display: block; margin-top: .25em; color: var(--g300); font: 500 .9em/1.1 var(--f-sans); white-space: nowrap; }
.mk-ad[data-s12~="push"] .ts12{ opacity: 1; transform: none; }
.mk-ad.dr12 .tl .sp path{ animation: m12-draw 1.6s var(--ease-io) both; }
.mk-ad main.ib12{ grid-template-columns: 17em minmax(0, 1fr) 15em; }
.mk-ad .ib12 .cvs{ gap: .7em; overflow: hidden; }
.mk-ad .ib12 .src12{ display: inline-flex; align-items: center; gap: .35em; margin-left: auto; padding: .4em .7em; border-radius: 99em; background: rgba(31, 122, 76, .1); color: var(--green); font: 600 .85em/1 var(--f-sans); font-style: normal; }
.mk-ad .ib12 .src12 .ico{ width: 1.1em; height: 1.1em; }
.mk-ad .ib12 .dy12{ align-self: center; color: var(--g500); font: 500 .85em/1 var(--f-mono); }
.mk-ad .ib12 .msg time{ display: block; margin-top: .35em; color: var(--g500); font: 500 .78em/1 var(--f-mono); }
.mk-ad .ib12 .msg.me time{ color: rgba(255, 255, 255, .7); text-align: right; }
.mk-ad .ty12{ display: none; align-self: flex-start; gap: .3em; padding: .95em 1.05em; border-radius: 1.1em 1.1em 1.1em .35em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); }
.mk-ad .ty12 i{ width: .5em; height: .5em; border-radius: 50%; background: var(--g400); animation: mk-dot 1s infinite; }
.mk-ad .ty12 i:nth-child(2){ animation-delay: .15s; }
.mk-ad .ty12 i:nth-child(3){ animation-delay: .3s; }
.mk-ad[data-s12="typing"] .ty12{ display: flex; }
.mk-ad [data-k12].hid12{ display: none; }
.mk-ad.on12 [data-k12]{ animation: m12-in .45s var(--ease) both; }
.mk-ad[data-s12="reply"] .rb span{ color: var(--black); }
.mk-ad[data-s12="reply"] .rb span::after, .mk-ad[data-s12="typing"] .ip12 span::after{ content: ""; display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: var(--burgundy); animation: mk-caret 1s steps(1) infinite; }
.mk-ad .sd12{ gap: .6em; }
.mk-ad .ap12{ flex: none; height: 25em; padding: .45em; border-radius: 2.3em; background: var(--black); box-shadow: 0 1em 2em -1.2em rgba(42, 7, 20, .5); }
.mk-ad .ap12 .sc{ display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 1.9em; background: var(--g50); font-size: .64em; }
.mk-ad .ah12{ display: flex; align-items: center; gap: .6em; padding: 3em 1.2em 1em; background: var(--white); border-bottom: 1px solid var(--g100); }
.mk-ad .ah12 > i{ display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--burgundy); color: var(--white); font: 800 1.1em/1 var(--f-display); font-style: normal; }
.mk-ad .ah12 b{ display: block; font: 800 1.4em/1 var(--f-display); }
.mk-ad .ah12 small{ display: block; margin-top: .3em; color: var(--g500); font: 500 1em/1 var(--f-sans); }
.mk-ad .ac12{ flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; padding: 1em; overflow: hidden; }
.mk-ad .ac12 .m{ flex: none; align-self: flex-end; max-width: 84%; padding: .7em .9em; border-radius: 1.1em 1.1em .3em 1.1em; background: var(--burgundy); color: var(--white); font: 500 1.15em/1.3 var(--f-sans); }
.mk-ad .ac12 .m.tm12{ align-self: flex-start; border-radius: 1.1em 1.1em 1.1em .3em; background: var(--white); color: var(--black); box-shadow: 0 0 0 1px var(--g100); }
.mk-ad .ip12{ display: flex; align-items: center; gap: .6em; padding: .8em 1em 1.8em; background: var(--white); border-top: 1px solid var(--g100); }
.mk-ad .ip12 span{ flex: 1; min-width: 0; padding: .75em 1em; overflow: hidden; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--g200); color: var(--g400); font: 500 1.1em/1.2 var(--f-sans); white-space: nowrap; }
.mk-ad[data-s12="typing"] .ip12 span{ color: var(--black); box-shadow: inset 0 0 0 .14em var(--burgundy-600); }
.mk-ad .ip12 > i{ flex: none; display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--burgundy); color: var(--white); }
.mk-ad .ip12 .ico{ width: 1.3em; height: 1.3em; }
.mk-ad .kb12{ position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.mk-ad .cl12{ min-width: 0; display: flex; flex-direction: column; gap: .7em; padding: .9em; border-radius: 1.2em; background: var(--g50); box-shadow: inset 0 0 0 1px var(--g100); }
.mk-ad .ch12{ display: flex; align-items: center; gap: .5em; padding: .1em .2em; }
.mk-ad .ch12::before{ content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--g300); }
.mk-ad .cl12[data-c="1"] .ch12::before{ background: var(--amber-500); }
.mk-ad .cl12[data-c="2"] .ch12::before{ background: var(--green); }
.mk-ad .ch12 b{ font: 800 1.15em/1 var(--f-display); }
.mk-ad .ch12 em{ padding: .3em .6em; border-radius: 99em; background: var(--white); box-shadow: 0 0 0 1px var(--g100); color: var(--g600); font: 600 .85em/1 var(--f-mono); font-style: normal; }
.mk-ad .cs12{ display: flex; flex-direction: column; gap: .7em; }
.mk-ad .tk12{ position: relative; display: grid; gap: .55em; padding: .85em .9em; border-radius: 1em; background: var(--white); box-shadow: 0 .15em .5em rgba(42, 7, 20, .06), 0 0 0 1px var(--g100); transition: transform .75s var(--ease), opacity .4s; }
.mk-ad .tk12.mv{ z-index: 2; box-shadow: 0 0 0 .14em var(--burgundy-600), 0 .8em 1.6em -.7em rgba(42, 7, 20, .35); }
.mk-ad .tk12.gone{ opacity: 0; }
.mk-ad .tk12 .r1{ display: flex; align-items: center; gap: .5em; }
.mk-ad .tk12 code{ color: var(--g500); font: 500 .85em/1 var(--f-mono); }
.mk-ad .tk12 .pr{ margin-left: auto; padding: .3em .55em; border-radius: 99em; font: 600 .8em/1 var(--f-sans); font-style: normal; }
.mk-ad .tk12 .pr.hi{ background: rgba(200, 16, 46, .1); color: var(--cherry); }
.mk-ad .tk12 .pr.md{ background: rgba(178, 106, 0, .12); color: var(--amber); }
.mk-ad .tk12 .pr.lo{ background: var(--g100); color: var(--g600); }
.mk-ad .tk12 .ok12{ display: none; place-items: center; width: 1.5em; height: 1.5em; margin-left: auto; border-radius: 50%; background: var(--green); }
.mk-ad .tk12 .ok12 svg{ width: .95em; height: .95em; fill: none; stroke: var(--white); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-ad .tk12.dn .pr{ display: none; }
.mk-ad .tk12.dn .ok12{ display: grid; }
.mk-ad .tk12 > b{ font: 650 1.02em/1.25 var(--f-sans); }
.mk-ad .tk12.dn > b{ color: var(--g500); }
.mk-ad .tk12 .r2{ display: flex; align-items: center; gap: .5em; color: var(--g500); font: 500 .85em/1 var(--f-sans); }
.mk-ad .tk12 .r2 > span{ flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: .35em; overflow: hidden; white-space: nowrap; }
.mk-ad .tk12 .r2 .ico{ flex: none; width: 1.2em; height: 1.2em; }
.mk-ad .tk12 .av{ width: 2em; height: 2em; font-size: .85em; }
.dev-phone:has(> .scr > :is(.mk-bb, .mk-bc)){ padding: 0; background: none; box-shadow: none; }
.dev-phone > .scr:has(> :is(.mk-bb, .mk-bc)){ overflow: visible; border-radius: 0; background: none; }
.dev-phone > .scr:has(> :is(.mk-bb, .mk-bc))::before{ content: none; }
.mk-bb, .mk-bc{ position: absolute; inset: 0; }
.ph12{ position: absolute; inset: 0; padding: 1em; border-radius: 4.65em; background: var(--black); box-shadow: inset 0 0 0 1px var(--g900), 0 2.6em 4.6em -2.4em rgba(0, 0, 0, .6); transform-origin: 50% 85%; transition: transform .95s var(--ease), z-index 0s .3s; }
.ph12 > .sc12{ position: relative; height: 100%; overflow: hidden; border-radius: 3.75em; background: var(--white); isolation: isolate; }
.ph12 > .sc12::before{ content: ""; position: absolute; z-index: 20; top: 1.1em; left: 50%; width: 9em; height: 2.6em; transform: translateX(-50%); border-radius: 99em; background: var(--black); }
.mk-bb .sc12::after{ content: ""; position: absolute; z-index: 21; inset: 0; background: rgba(0, 0, 0, .1); pointer-events: none; transition: opacity .6s; }
.mk-bb .q0 .sc12::after{ opacity: 0; }
.ph12.q0{ z-index: 3; }
.ph12.q1{ z-index: 1; transform: translateX(-40%) rotate(-7deg) scale(.84); }
.ph12.q2{ z-index: 2; transform: translateX(40%) rotate(7deg) scale(.84); }
.mk-bb.st12 .ph12{ transform: none; }
.mk-tri .sc12::before{ content: none; }
.mk-tri .sc12 > video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (max-width: 900px){.ph12.q1{ transform: translateX(-30%) rotate(-6deg) scale(.82); }
.ph12.q2{ transform: translateX(30%) rotate(6deg) scale(.82); }}
.lo12{ flex: 1; min-width: 0; display: flex; align-items: center; gap: .6em; }
.lo12 i{ flex: none; display: grid; place-items: center; width: 3em; height: 3em; border-radius: .9em; background: var(--bc); }
.lo12 svg{ width: 1.7em; height: 1.7em; fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lo12 b{ overflow: hidden; color: var(--bc); font: 900 2.1em/1 var(--f-display); letter-spacing: -.015em; white-space: nowrap; text-overflow: ellipsis; }
.ap12 .tp, .mk-bm12 .tp{ min-height: 3.4em; }
.ap12 .bal{ background: linear-gradient(150deg, var(--bc), color-mix(in srgb, var(--bc) 55%, #000) 78%); }
.ap12 .bal small, .ap12 .two9 small{ color: rgba(255, 255, 255, .72); }
.ap12 .two9 em{ font-style: normal; }
.ap12 .qa i{ color: var(--bc); }
.ap12 .mk-tabs .it.on, .mk-bm12 .mk-tabs .it.on{ color: var(--bc); }
.mk-bm12 .cfg12{ margin-top: 1.1em; padding: 1em 1.1em 1.1em; border-radius: 1.4em; background: var(--g950); color: var(--white); }
.mk-bm12 .cfg12 > small{ display: flex; align-items: center; gap: .45em; color: var(--g400); font: 500 .95em/1 var(--f-mono); }
.mk-bm12 .cfg12 .ico{ width: 1.2em; height: 1.2em; }
.mk-bm12 .sws12{ display: flex; flex-wrap: wrap; gap: .5em; margin-top: .8em; }
.mk-bm12 .ch12{ position: relative; display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em .45em .45em; border-radius: 99em; background: rgba(255, 255, 255, .09); font: 600 1em/1 var(--f-sans); transition: color .35s; }
.mk-bm12 .ch12 > i{ position: relative; width: 2.3em; height: 1.35em; border-radius: 99em; background: var(--green); transition: background-color .35s; }
.mk-bm12 .ch12 > i::after{ content: ""; position: absolute; top: .175em; left: 1.125em; width: 1em; height: 1em; border-radius: 50%; background: var(--white); transition: left .35s var(--ease); }
.mk-bm12 .ch12.fx > i{ opacity: .55; }
.mk-bm12 .ch12.off{ color: var(--g400); }
.mk-bm12 .ch12.off > i{ background: var(--g800); }
.mk-bm12 .ch12.off > i::after{ left: .175em; }
.mk-bm12 .ch12::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 .14em var(--white); opacity: 0; }
.mk-bm12.on12 .ch12.tp12::before{ animation: m12-tap .7s ease-out both; }
.mk-bm12 .mds12{ display: flex; flex-direction: column; margin-top: .5em; }
.mk-bm12 .md12{ display: flex; align-items: center; gap: .9em; max-height: 6.4em; margin-top: .6em; padding: .85em 1em; overflow: hidden; border-radius: 1.3em; background: var(--white); box-shadow: inset 0 0 0 1px var(--g100); transition: max-height .6s var(--ease), margin .6s var(--ease), padding .6s var(--ease), opacity .45s, transform .6s var(--ease); }
.mk-bm12 .md12.off{ max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: scale(.94); }
.mk-bm12 .md12 > .ic{ flex: none; display: grid; place-items: center; width: 3em; height: 3em; border-radius: .95em; background: color-mix(in srgb, var(--bc) 12%, var(--white)); color: var(--bc); }
.mk-bm12 .md12 .ico{ width: 1.5em; height: 1.5em; }
.mk-bm12 .md12 > span{ flex: 1; min-width: 0; }
.mk-bm12 .md12 > span > b{ display: block; font: 700 1.2em/1.1 var(--f-sans); }
.mk-bm12 .md12 small{ display: block; margin-top: .3em; overflow: hidden; color: var(--g500); font: 500 .95em/1.15 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.mk-bm12 .md12 .am{ flex: none; font: 700 1.1em/1 var(--f-sans); font-style: normal; white-space: nowrap; }
.mk-bm12 .pg12{ display: block; height: .45em; margin-top: .5em; border-radius: 99em; background: var(--g100); }
.mk-bm12 .pg12 b{ display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--bc); }
.mk-bm12 .mk-tabs{ justify-content: stretch; padding: 0 .4em 1em; }
.mk-bm12 .mk-tabs .it{ flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow .6s var(--ease), opacity .4s; }
.mk-bm12 .mk-tabs .it.off{ flex-grow: .0001; opacity: 0; }
.mk-bc .mini12{ inset: 0 auto auto 50%; width: 30em; height: 62em; margin-left: -15em; transform: scale(.62); transform-origin: 50% 0; }
.mk-bc .wr12{ position: absolute; left: 50%; width: 0; border-left: .16em solid var(--g400); }
.mk-bc .wr12.a{ top: 38.9em; height: 4.7em; --h: 4.7em; }
.mk-bc .wr12.b{ top: 48.8em; height: 3.8em; --h: 3.8em; }
.mk-bc .wr12 > *{ position: absolute; top: 0; left: -.58em; width: 1em; height: 1em; margin-top: -.5em; border-radius: 50%; }
.mk-bc .wr12 .d{ background: var(--burgundy-300); transform: translateY(calc(var(--h) * .3)); }
.mk-bc .wr12 .u{ background: var(--green-300); transform: translateY(calc(var(--h) * .72)); }
.mk-bc .wr12 b{ left: -.83em; width: 1.5em; height: 1.5em; margin-top: -.75em; background: var(--green); box-shadow: 0 0 0 .35em rgba(170, 208, 183, .45); opacity: 0; }
.mk-bc.on12 .wr12 .d{ animation: m12-down 2.4s linear infinite; }
.mk-bc.on12 .wr12 .u{ animation: m12-up 2.4s linear -1.2s infinite; }
.mk-bc[data-s12~="in"] .wr12.b b{ animation: m12-up .75s ease-in both; }
.mk-bc[data-s12~="in"] .wr12.a b{ animation: m12-up .75s ease-out .7s both; }
.mk-bc .ly12, .mk-bc .co12{ position: absolute; left: 2.6em; right: 2.6em; border-radius: 1.3em; }
.mk-bc .ly12{ top: 43.6em; height: 5.2em; display: grid; place-content: center; gap: .3em; background: var(--white); box-shadow: inset 0 0 0 .14em var(--g200), 0 1em 2em -1.2em rgba(42, 7, 20, .4); color: var(--black); text-align: center; }
.mk-bc .ly12 b{ font: 800 1.5em/1 var(--f-display); }
.mk-bc .ly12 small{ color: var(--g500); font: 500 1em/1 var(--f-sans); }
.mk-bc .co12{ top: 52.6em; height: 7.4em; display: flex; align-items: center; gap: 1em; padding: 0 1.4em; background: var(--g950); box-shadow: inset 0 0 0 1px var(--g800), 0 1em 2em -1.2em rgba(0, 0, 0, .5); color: var(--white); }
.mk-bc .co12 > i{ flex: none; display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 1em; background: rgba(255, 255, 255, .1); color: var(--green-300); }
.mk-bc .co12 .ico{ width: 1.8em; height: 1.8em; }
.mk-bc .co12 b{ display: block; font: 800 1.5em/1 var(--f-display); }
.mk-bc .co12 small{ display: block; margin-top: .35em; color: var(--g400); font: 500 1em/1.1 var(--f-sans); }
.mk-bc[data-s12~="wait"] .nw12{ display: none; }
.mk-bc[data-s12~="wait"] .nw12 + .tx{ margin-top: .8em; border-top: 0; }
.mk-bc.on12 .nw12{ animation: m12-in .5s var(--ease) both; }
.mk-bc.on12:not([data-s12~="wait"]) .bal{ animation: m12-glow 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce){.on12, .on12 *, .on12 *::before, .on12 *::after{ animation: none !important; }}
.b-bundle{ max-width: 760px; margin: 28px 0 0; color: var(--mut); font: 400 19px/1.55 var(--f-sans); }
.b-parts{ padding-top: 140px; }
.b-parts > h2{ margin: 0; font: 900 34px/1 var(--f-display); letter-spacing: -.015em; }
.b-part{ margin-top: 64px; }
.b-part + .b-part{ margin-top: 120px; }
.b-part > .hd{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.b-part .n{ display: block; color: var(--dim); font: 500 13px/1 var(--f-mono); }
.b-part h3{ margin: 16px 0 0; font: 900 clamp(40px, 4.4vw, 64px)/.95 var(--f-display); letter-spacing: -.025em; }
.b-part .pf{ display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.b-part .pf li{ padding: 7px 12px; border-radius: 99px; background: var(--tint); color: var(--hi); font: 600 12px/1 var(--f-mono); }
.b-part .ln p{ max-width: 520px; margin: 0; color: var(--mut); font: 400 19px/1.55 var(--f-sans); }
.b-part .ln .b-link{ margin-top: 20px; }
.b-stage{ position: relative; display: flex; align-items: center; justify-content: center; margin-top: 36px; padding: 72px 64px; overflow: hidden; border-radius: 32px; background: var(--s1); container-type: inline-size; isolation: isolate; }
.b-stage[data-card="burg"]{ background: var(--burgundy); }
.b-stage[data-card="graph"]{ background: #1B1B1D; }
.b-stage[data-card="blush"]{ background: var(--blush); }
.b-stage[data-card="white"]{ background: var(--white); }
html[data-theme="light"] .b-stage[data-card="white"]{ box-shadow: inset 0 0 0 1px var(--e2); }
.b-stage > .dev-browser{ --w: min(820px, 100cqw); }
.b-stage[data-k="trio phone"] > .dev-phone:not(.s3){ --w: 236px; margin: 0 150px 0 120px; }
.b-stage[data-k="trio phone"] > .dev-phone.s3{ --w: 196px; }
.dev-set3{ --a: 2.604; position: relative; flex: none; width: 100%; aspect-ratio: var(--a); container-type: inline-size; }
.dev-set3 > .s3{ position: absolute; max-width: none; }
.dev-set3 > .dev-phone.s3{ --w: 14.49cqw; left: 0; top: 8.45cqw; }
.dev-set3 > .dev-tablet.s3{ --w: 28.8cqw; left: 17.92cqw; top: 0; }
.dev-set3 > .dev-browser.s3{ --w: 49.86cqw; left: 50.14cqw; top: 6.91cqw; }
.b-case-hero > .dev-set3{ width: min(calc(100% + -128px), calc((max(560px, min(720px, 80vh)) + -160px) * var(--a))); }
.b-card .dv > .dev-set3, .b-prev > div > .dev-set3{ --a: 1.25; }
.b-card .dv > .dev-set3{ width: min(100%, calc((min(600px, 66vh) + -116px) * var(--a))); }
.b-prev > div > .dev-set3{ width: min(calc(100% + -40px), calc((min(600px, 70vh) + -96px) * var(--a))); }
:is(.b-card, .b-prev) .dev-set3 > .dev-browser.s3{ z-index: 0; --w: 74cqw; left: 26cqw; top: 0; }
:is(.b-card, .b-prev) .dev-set3 > .dev-tablet.s3{ z-index: 1; --w: 38cqw; left: 0; top: 29cqw; }
:is(.b-card, .b-prev) .dev-set3 > .dev-phone.s3{ z-index: 2; --w: 19cqw; left: 68cqw; top: 39cqw; }
.b-stage[data-k="draw"]{ padding: 64px 48px; }
.mk-be17{ position: relative; width: 100%; aspect-ratio: 1000 / 470; color: var(--white); font-size: max(10px, calc(100cqw / 72)); }
.mk-be17 > svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-be17 > .nr17{ display: none; }
.mk-be17 .w17{ fill: none; stroke: var(--g800); stroke-width: 2; transition: stroke .6s; }
.mk-be17 .p17{ fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 2; stroke-dashoffset: var(--o); }
.mk-be17 .p17.i{ stroke: var(--burgundy-300); }
.mk-be17 .p17.o{ stroke: var(--green-300); }
.mk-be17.on12 .p17{ animation: f17 2.6s linear var(--d) infinite; }
.mk-be17.on12 .p17.o{ animation-direction: reverse; }
@keyframes f17{ from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
.mk-be17 .nd17{ position: absolute; z-index: 1; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: flex; align-items: center; gap: .8em; width: 14.5em; padding: .9em 1em; border-radius: 1.1em; background: var(--g900); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1em 2em -1.2em rgba(0, 0, 0, .6); transform: translate(-50%, -50%); transition: box-shadow .6s; }
.mk-be17 .nd17 > i{ flex: none; display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .8em; background: rgba(255, 255, 255, .07); color: var(--burgundy-300); }
.mk-be17 .nd17 .ico{ width: 1.4em; height: 1.4em; }
.mk-be17 .nd17 > span{ min-width: 0; }
.mk-be17 .nd17 b{ display: block; font: 800 1.1em/1.1 var(--f-display); }
.mk-be17 .nd17 small{ display: block; margin-top: .3em; color: var(--g400); font: 500 .85em/1.2 var(--f-sans); }
.mk-be17 .api17{ width: 15em; padding: 1.3em 1.2em; background: var(--white); color: var(--black); box-shadow: 0 0 0 .55em rgba(255, 255, 255, .07), 0 1.4em 3em -1.2em rgba(0, 0, 0, .7); }
.mk-be17 .api17 > i{ background: var(--burgundy); color: var(--white); }
.mk-be17 .api17 b{ font-size: 1.3em; }
.mk-be17 .api17 small{ color: var(--g500); }
.mk-be17[data-s17="app"] .w17[data-l~="app"], .mk-be17[data-s17="web"] .w17[data-l~="web"], .mk-be17[data-s17="adm"] .w17[data-l~="adm"]{ stroke: var(--burgundy-400); }
.mk-be17[data-s17="app"] .nd17[data-l~="app"], .mk-be17[data-s17="web"] .nd17[data-l~="web"], .mk-be17[data-s17="adm"] .nd17[data-l~="adm"]{ box-shadow: inset 0 0 0 .14em var(--burgundy-400), 0 1em 2em -1.2em rgba(0, 0, 0, .6); }
@media (max-width: 1320px){.b-stage{ padding: 56px 40px; }}
@media (max-width: 900px){.b-parts{ padding-top: 100px; }
.b-part + .b-part{ margin-top: 88px; }
.b-part > .hd{ grid-template-columns: 1fr; gap: 20px; }
.b-part h3{ font-size: min(44px, 11.4vw); }
.b-part .ln p{ font-size: 17px; }
.b-stage{ margin-top: 28px; padding: 28px 20px; border-radius: 24px; }
.b-stage:is([data-k="browser"], [data-k="case"]){ justify-content: flex-start; padding-right: 0; }
.b-stage > .dev-browser{ --w: max(520px, calc(100vw + -96px)); max-width: none; }
.b-stage[data-k="trio phone"] > .dev-phone:not(.s3){ --w: min(190px, 54cqw); margin: 0; }
.b-stage[data-k="trio phone"] > .dev-phone.s3{ display: none; }
.dev-set3, .b-card .dv > .dev-set3{ --a: .7135; }
:is(.b-case-hero, .b-card, .b-stage) .dev-set3 > .dev-browser.s3{ --w: 100cqw; left: 0; top: 0; }
:is(.b-case-hero, .b-card, .b-stage) .dev-set3 > .dev-phone.s3{ --w: 27.2cqw; left: 6.4cqw; top: 83.96cqw; }
:is(.b-case-hero, .b-card, .b-stage) .dev-set3 > .dev-tablet.s3{ --w: 54cqw; left: 39.6cqw; top: 68.16cqw; }
.b-case-hero > .dev-set3{ width: min(calc(100% + -40px), calc((max(560px, min(720px, 80vh)) + -80px) * var(--a))); }
.b-card .dv > .dev-set3{ width: min(100%, calc(400px * var(--a))); }
.b-stage[data-k="draw"]{ padding: 28px 16px; }
.mk-be17{ aspect-ratio: 1000 / 1250; font-size: calc(100cqw / 28); }
.mk-be17 > .wd17{ display: none; }
.mk-be17 > .nr17{ display: block; }
.mk-be17 .nr17 .w17{ stroke-width: 5; }
.mk-be17 .nr17 .p17{ stroke-width: 24; }
.mk-be17 .nd17{ left: calc(var(--nx) * 1%); top: calc(var(--ny) * 1%); flex-direction: column; gap: .45em; width: 8.7em; padding: .8em .45em; text-align: center; }
.mk-be17 .nd17 > i{ width: 2.5em; height: 2.5em; }
.mk-be17 .api17{ flex-direction: row; width: 12.5em; padding: 1em; text-align: left; }}
@media (max-width: 900px){html.mp .b-nav.solid{ -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--page) 96%, transparent); }
html.mp .mp-off *, html.mp .mp-off *::before, html.mp .mp-off *::after{ animation-play-state: paused !important; }
html.mp .b-card .dv:has(> .dev-browser){ margin-right: 0; padding: 16px 0 4px; overflow: visible; place-items: center; container-type: inline-size; }
html.mp .b-entry .dv:has(> .dev-browser){ padding: 24px 16px; place-items: center; container-type: inline-size; }
html.mp .b-case-hero:has(> .dev-browser){ padding: 28px 16px; place-items: center; container-type: inline-size; }
html.mp :is(.b-card .dv, .b-entry .dv, .b-case-hero):has(> .dev-browser) > .dev-browser{ --w: 100cqw; max-width: 100%; }
html.mp .b-stage:is([data-k="browser"], [data-k="case"]){ justify-content: center; padding-right: 20px; }
html.mp .b-stage > .dev-browser{ --w: 100cqw; max-width: 100%; }
html.mp .b-card .dv:has(> .dev-phone){ height: auto; padding-top: 8px; }
html.mp .b-case-hero > .dev-phone{ --w: min(300px, calc((max(560px, min(720px, 80vh)) + -48px) * .4839)); }
html.mp .b-gn small{ font-size: 12px; }
html.mp .b-contact .b-mail{ font-size: min(22px, 5.4vw); overflow-wrap: anywhere; }
html.mp .b-nav .b-btn{ height: 44px; }
html.mp :is(.b-brand, .b-link, .b-case-tags a, .b-replay, .b-foot-top nav a, .b-foot-bot a, .b-contact .b-mail){ position: relative; }
html.mp :is(.b-brand, .b-link, .b-case-tags a, .b-replay, .b-foot-top nav a, .b-foot-bot a, .b-contact .b-mail)::after{ content: ""; position: absolute; top: 50%; left: -4px; right: -4px; height: 44px; transform: translateY(-50%); }
html.mp .b-ask .chips button, html.mp .b-commit .opts button{ min-height: 44px; padding-top: 0; padding-bottom: 0; }}
@media (max-width: 900px){.b-replay{display:none!important}}