/* circlesco.tech · Kinvy case study only (brand: grape #5B3DF5, tangerine #FF8A3D, ink #1D1D1F on white; face Manrope in the specimen only). Grape appears only inside screens, the mark, swatches and tiny accents. */
.cs-kinvy{--p-bg:var(--ink);--p-fg:#fff;--p-acc:#5B3DF5;--n-bg:#1264FF;--n-fg:#fff}
.cs-kinvy .cs-stage .frame-bar{background:#fff}
.cs-kinvy .cs-stage .mac-lid{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 60px 90px -40px rgba(0,0,0,.7)}
.cs-kinvy .cs-logo-mat{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cs-kinvy .cs-logo-mat img{width:22%;border-radius:22%}
.cs-kinvy .cs-spec-big,.cs-kinvy .kit-type .aa,.cs-kinvy .kit-type .face{font-family:"Manrope",var(--sans)}
.cs-kinvy .cs-spec-big{font-weight:800;letter-spacing:-.045em;line-height:.98}
.cs-kinvy .cs-spec-big em{color:#5B3DF5}
.cs-kinvy .kit-type .face.f-body{font-weight:500}
.cs-kinvy .cs-mark-row .mk.white{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cs-kinvy .cs-mark-row .mk.ink{background:var(--ink)}
.cs-kinvy .cs-mark-row .mk.gray{background:var(--g2)}
.cs-kinvy .cs-mark-row .mk img{width:54%;height:auto;object-fit:contain;border-radius:22%}
/* phone captures are 508x1100 (2x), so no phone is ever wider than about 280px */
.cs-kinvy .fu-media .solo-ph{width:min(100%,260px)}
.cs-kinvy .fu-media .trio{max-width:860px;margin-inline:auto}
.cs-kinvy .seq-stage .iph{width:min(100%,280px,calc(78vh * .4885));margin-inline:auto}
.cs-kinvy .seq-steps li .seq-mshot .iph{width:min(100%,260px)}
/* coded components: Kinvy skin (Manrope, grape, ink, the four looks) */
.cs-kinvy .ui{--ui-font:"Manrope",var(--sans);--ui-acc:#5B3DF5;--ui-ink:#1D1D1F;--ui-mute:#6E6E73;--ui-line:rgba(29,29,31,.1);--ui-g:#F5F5F7;--ui-r:.9em;font-weight:600}
.cs-kinvy .ui-btn{font-weight:700;border-radius:999px}
.cs-kinvy .ui-btn.ghost{box-shadow:inset 0 0 0 1.5px var(--ui-ink);color:var(--ui-ink)}
.cs-kinvy .ui-btn.rasp{background:#C8176B}
.cs-kinvy .ui-tile{border-radius:1.25em}
.cs-kinvy .ui-tile .big{font-weight:800}
.cs-kinvy .ui-card{border-radius:1.25em;border-color:transparent;box-shadow:0 1px 0 rgba(29,29,31,.04),0 12px 28px -18px rgba(29,29,31,.25)}
.cs-kinvy .ui-card h5{font-weight:800}
.cs-kinvy .ui.dk{--ui-ink:#fff;--ui-mute:rgba(255,255,255,.72);--ui-line:rgba(255,255,255,.12);--ui-g:#2A2A2F;color:#fff}
.cs-kinvy .ui-tabbar.dk{background:#0F0F12}
.cs-kinvy .ui-tabbar.dk a.on{color:#fff}
.cs-kinvy .ui-tabbar.dk a.on .pl{background:var(--ui-acc)}
.cs-kinvy .ui-arcade{font-family:"JetBrains Mono",var(--mono);border-radius:.6em;background:#0F0F12;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 -3px 0 #1264FF}
.cs-kinvy .ui-arcade .big{color:#2F7BFF}
.cs-kinvy .ui-heir{font-family:Georgia,"Times New Roman",serif;font-weight:500}
.cs-kinvy .ui-picnic{background:#fff}
.cs-kinvy .ui-plaid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 .35em,transparent .35em 1.1em),repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 .35em,transparent .35em 1.1em),#C8362E;color:#fff;border-radius:1em 1em 0 0;padding:1em 1.1em}
.cs-kinvy .ui-plaid.blue{background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 .35em,transparent .35em 1.1em),repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 .35em,transparent .35em 1.1em),#2F4B8F}
.cs-kinvy .ui-looks{display:inline-flex;gap:.5em;flex-wrap:wrap}
.cs-kinvy .ui-looks b{display:inline-flex;align-items:center;gap:.4em;height:2em;padding:0 .8em;border-radius:999px;font-size:.8em;font-weight:700;box-shadow:inset 0 0 0 1px var(--ui-line);cursor:pointer}
.cs-kinvy .ui-looks b.on{box-shadow:inset 0 0 0 1.5px var(--ui-ink)}
.cs-kinvy .ui-looks i{width:.9em;height:.9em;border-radius:50%;background:var(--c)}