/* ==========================================================================
   Purpose-specific procedural compositions (app/visuals_more.php)
   All sizes in em so each scene scales with its container like an image.
   ========================================================================== */

/* Background variety: each family gets its own backdrop so scenes never look cloned */
.vx-map, .vx-pipeline, .vx-git, .vx-notebook { background: radial-gradient(90% 80% at 80% 0%, color-mix(in srgb, var(--a) 40%, #0A0F1F), transparent 60%), #0A0F1F; }
.vx-journey, .vx-wireframe { background: #F3EFE7; background-image: radial-gradient(#DCD3C4 .12em, transparent .13em); background-size: 2.4em 2.4em; }
.vx-tokens, .vx-components { background: linear-gradient(150deg, #FFFFFF, color-mix(in srgb, var(--a) 10%, #F6F7FB)); }
.vx-eval, .vx-search, .vx-docs { background: radial-gradient(100% 90% at 0% 0%, color-mix(in srgb, var(--a) 22%, #fff), transparent 60%), linear-gradient(160deg, #F8F7FF, #ECEAF8); }
.vx-launch, .vx-growth { background: radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--a) 25%, #fff), transparent 60%), linear-gradient(200deg, #F7FAFD, #E6F2EE); }
.vx-kanban, .vx-saas, .vx-checkout { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 16%, #F4F6FB), #EEF1F7 70%); }
.vx-health { background: linear-gradient(160deg, #EAF6FF, color-mix(in srgb, var(--a) 18%, #F2F8FC)); }
.vx-career, .vx-widgets { background: radial-gradient(80% 90% at 20% 10%, color-mix(in srgb, var(--a) 28%, #fff), transparent 60%), linear-gradient(160deg, #F7F9FE, #EAEEF8); }
.vx-photo { background: #E4E8F0; }
.vx-photo .vx-stage { padding: 0; }

/* shared little pieces */
.vx .s { width: 60% !important; }
.vx i { font-style: normal; }

/* ---------- SaaS / CRM ---------- */
.sx { display: grid; grid-template-columns: 5.5em 1fr 17em; height: 100%; background: #FBFCFE; }
.sx-nav { background: #F1F3F9; border-right: .1em solid #E6E9F2; display: grid; align-content: start; justify-items: center; gap: 1.2em; padding: 1.6em 0; }
.sx-nav .vx-logo { margin: 0 0 .6em; }
.sx-nav span { width: 2.6em; height: 2.6em; border-radius: .8em; background: #E3E7F0; }
.sx-nav span.on { background: var(--a); }
.sx-main { padding: 1.8em 2em; display: flex; flex-direction: column; gap: 1.4em; min-width: 0; }
.sx-head { display: flex; align-items: center; gap: 1em; }
.sx-head strong { font: 800 1.9em var(--f-display); margin-right: auto; }
.sx-search { display: flex; align-items: center; gap: .5em; font-size: 1.05em; color: #8A93A8; background: #fff; box-shadow: 0 0 0 .1em #E4E8F1; border-radius: .7em; padding: .5em 1em; }
.sx-search .vx-ic { width: 1.3em; height: 1.3em; }
.sx-btn { background: var(--a); color: #fff; font-weight: 700; font-size: 1.05em; border-radius: .7em; padding: .55em 1.1em; }
.sx-table { background: #fff; border-radius: 1.2em; box-shadow: 0 0 0 .1em #EDF0F6; padding: .6em 1.2em; }
.sx-th, .sx-row { display: grid; grid-template-columns: 2.6em 1fr 7em 5em; align-items: center; gap: .9em; font-size: 1.12em; padding: .75em 0; }
.sx-th { grid-template-columns: 1fr 7em 5em; padding-left: 3.5em; color: #8A93A8; font-size: .95em; text-transform: uppercase; letter-spacing: .06em; border-bottom: .1em solid #EEF1F6; }
.sx-row + .sx-row { border-top: .1em solid #F2F4F8; }
.sx-row i { width: 2.4em; height: 2.4em; border-radius: 50%; background: hsl(var(--h) 70% 72%); }
.sx-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-row em { font-style: normal; font-weight: 700; text-align: right; }
.sx-row.on { background: color-mix(in srgb, var(--a) 7%, #fff); margin: 0 -1.2em; padding-left: 1.2em; padding-right: 1.2em; }
.sx-st { font-size: .85em; font-weight: 700; padding: .25em .7em; border-radius: 99em; justify-self: start; }
.sx-st.ok { background: #E3F8EE; color: #0E7A48; } .sx-st.run { background: color-mix(in srgb, var(--a) 14%, #fff); color: var(--a); } .sx-st.warn { background: #FFF3D6; color: #9A6700; }
.sx-detail { border-left: .1em solid #EDF0F6; background: #fff; padding: 2em 1.6em; display: grid; align-content: start; justify-items: center; gap: .5em; text-align: center; font-size: 1.05em; }
.sx-av { width: 5em; height: 5em; border-radius: 50%; background: linear-gradient(135deg, var(--a), #FF2E88); margin-bottom: .4em; }
.sx-detail b { font-size: 1.3em; }
.sx-detail small { color: #8A93A8; }
.sx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; width: 100%; margin: 1em 0; }
.sx-stats span { background: #F4F6FB; border-radius: .9em; padding: .8em .4em; font-size: .9em; color: #7A8398; }
.sx-stats em { display: block; font: 800 1.6em var(--f-display); font-style: normal; color: var(--ink); }
.sx-act { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: .8em; text-align: left; }
.sx-act li { display: grid; grid-template-columns: 1em 1fr auto; gap: .6em; align-items: center; font-size: .95em; }
.sx-act li i { width: .7em; height: .7em; border-radius: 50%; background: var(--a); }
.sx-act small { color: #8A93A8; }

/* ---------- Logistics map ---------- */
.mp { position: absolute; inset: 0; }
.vx-map .vx-stage { padding: 0; }
.mp-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-road { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mp-route { fill: none; stroke: var(--a); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 10 8; animation: vxflow 3s linear infinite; filter: drop-shadow(0 0 6px var(--a)); }
.mp::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 4em 4em; }
.mp-pin { position: absolute; width: 1.8em; height: 1.8em; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5em color-mix(in srgb, var(--a) 35%, transparent); }
.mp-pin.end { background: #FF2E88; box-shadow: 0 0 0 .6em rgba(255, 46, 136, .3), 0 0 0 1.4em rgba(255, 46, 136, .12); }
.mp-truck { position: absolute; transform: translate(-50%, -50%); width: 3.4em; height: 3.4em; border-radius: 1em; background: var(--lime); color: var(--ink); display: grid; place-items: center; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, .6); }
.mp-panel { position: absolute; left: 4%; top: 7%; width: 34%; background: rgba(255, 255, 255, .96); border-radius: 1.4em; padding: 1.4em; display: grid; gap: .9em; box-shadow: 0 2em 4em -2em rgba(0, 0, 0, .6); font-size: 1.1em; }
.mp-panel > b { font-size: 1.1em; }
.mp-li { display: flex; gap: .8em; align-items: center; }
.mp-li i { width: .9em; height: .9em; border-radius: 50%; background: var(--green); flex: none; }
.mp-li i.run { background: var(--a); } .mp-li i.warn { background: var(--amber); }
.mp-li b { display: block; font-size: .95em; }
.mp-li small { color: #7A8398; font-size: .85em; }
.mp-kpi { position: absolute; right: 4%; bottom: 8%; background: #0B1020; color: #fff; border-radius: 1.2em; padding: 1em 1.4em; box-shadow: 0 0 0 .1em rgba(255, 255, 255, .1); }
.mp-kpi small { display: block; color: #AEB6CC; font-size: 1em; }
.mp-kpi b { font: 900 2.4em/1 var(--f-display); color: var(--lime); }

/* ---------- Telehealth ---------- */
.th { width: 100%; height: 100%; display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.6em; }
.th-call { position: relative; border-radius: 1.8em; overflow: hidden; background: linear-gradient(160deg, #CFE6FF, #9EC4F2); box-shadow: 0 3em 5em -2.5em rgba(10, 15, 31, .45); }
.th-person { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 55%; height: 82%; }
.th-head { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 38%; aspect-ratio: .85; border-radius: 50% 50% 46% 46%; background: #D9A07A; box-shadow: inset 0 1.4em 0 #3B2A20; }
.th-body { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 48% 48% 0 0; background: #fff; box-shadow: inset 0 0 0 .6em #E8F2FF; }
.th-body::after { content: ""; position: absolute; left: 44%; top: 12%; width: 12%; height: 40%; border-radius: 1em; background: #6BA3E6; }
.th-name { position: absolute; left: 1.4em; top: 1.4em; background: rgba(10, 15, 31, .6); color: #fff; font-weight: 600; font-size: 1.05em; padding: .4em .9em; border-radius: .7em; backdrop-filter: blur(6px); }
.th-self { position: absolute; right: 1.4em; top: 1.4em; width: 24%; aspect-ratio: .8; border-radius: 1em; overflow: hidden; background: linear-gradient(160deg, #FFE0CC, #F6B894); box-shadow: 0 0 0 .25em #fff; }
.th-self .th-head { width: 42%; top: 18%; background: #8A5A3C; box-shadow: inset 0 1em 0 #1B1B1B; }
.th-self .th-body { height: 40%; background: var(--a); box-shadow: none; }
.th-self .th-body::after { display: none; }
.th-ctrl { position: absolute; left: 50%; bottom: 1.4em; transform: translateX(-50%); display: flex; gap: .8em; background: rgba(10, 15, 31, .6); padding: .6em; border-radius: 99em; backdrop-filter: blur(6px); }
.th-ctrl i { width: 3em; height: 3em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .15); color: #fff; }
.th-ctrl i.end { background: #E5484D; }
.th-side { background: #fff; border-radius: 1.8em; padding: 1.6em; display: grid; align-content: start; gap: 1em; box-shadow: 0 3em 5em -2.5em rgba(10, 15, 31, .35); font-size: 1.1em; }
.th-v { background: #F4F7FC; border-radius: 1em; padding: .9em 1em; display: grid; gap: .2em; }
.th-v small, .th-rx small { color: #7A8398; font-size: .9em; }
.th-v em { font-style: normal; font: 800 1.5em var(--f-display); }
.th-v svg { width: 100%; height: 2.4em; }
.th-v path { fill: none; stroke: #E5484D; stroke-width: 2; vector-effect: non-scaling-stroke; }
.th-rx { display: grid; gap: .5em; }
.th-rx span { height: .6em; border-radius: 1em; background: #E4E9F2; }
.th-btn { background: var(--a); color: #fff; font-weight: 700; text-align: center; border-radius: .9em; padding: .8em; }

/* ---------- Knowledge docs ---------- */
.dc { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1.05fr; gap: 1.6em; align-items: center; }
.dc-page { background: #fff; border-radius: 1.2em; padding: 1.6em; display: grid; gap: .75em; box-shadow: 0 3em 5em -2.5em rgba(40, 20, 120, .35); transform: rotate(-2deg); }
.dc-top { display: flex; gap: .6em; align-items: center; font-size: 1.05em; margin-bottom: .4em; }
.dc-top .vx-ic { color: #E5484D; }
.dc-top small { margin-left: auto; color: #8A93A8; }
.dc-h { height: 1.2em; width: 70%; border-radius: .4em; background: #1B2033; margin-bottom: .3em; }
.dc-l { position: relative; height: .65em; border-radius: 1em; background: #E5E8F0; }
.dc-l.on { background: color-mix(in srgb, var(--a) 35%, #fff); box-shadow: 0 0 0 .35em color-mix(in srgb, var(--a) 18%, transparent); }
.dc-l em { position: absolute; right: -1.8em; top: 50%; transform: translateY(-50%); width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--a); color: #fff; font: 800 .9em/1.5em var(--f-body); text-align: center; font-style: normal; }
.dc-ans { display: grid; gap: 1em; }
.dc-q { justify-self: end; background: var(--ink); color: #fff; padding: .9em 1.2em; border-radius: 1.2em 1.2em .3em 1.2em; font-size: 1.15em; }
.dc-a { background: #fff; border-radius: 1.2em 1.2em 1.2em .3em; padding: 1.2em; display: grid; gap: .6em; box-shadow: 0 2em 4em -2em rgba(40, 20, 120, .3); }
.dc-a > span { height: .65em; border-radius: 1em; background: #E5E8F0; }
.dc-cites { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .4em; }
.dc-cites i { font-size: .95em; font-weight: 600; padding: .35em .7em; border-radius: .6em; background: color-mix(in srgb, var(--a) 12%, #fff); color: var(--a); }
.dc-conf { justify-self: start; display: flex; gap: .8em; align-items: center; background: #EAFBF2; color: #0E7A48; border-radius: .8em; padding: .6em 1em; font-size: 1.05em; }

/* ---------- Checkout ---------- */
.co { width: 100%; height: 100%; background: #fff; border-radius: 1.6em; padding: 1.8em 2em; box-shadow: 0 3em 6em -2.5em rgba(10, 15, 31, .4); display: flex; flex-direction: column; gap: 1.4em; }
.co-steps { display: flex; align-items: center; gap: .8em; justify-content: center; }
.co-steps span { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.05em; background: #EEF1F7; color: #8A93A8; }
.co-steps span.done { background: var(--green); color: #fff; } .co-steps span.on { background: var(--a); color: #fff; box-shadow: 0 0 0 .35em color-mix(in srgb, var(--a) 20%, transparent); }
.co-steps i { width: 5em; height: .25em; border-radius: 1em; background: #E4E8F1; }
.co-grid { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6em; min-height: 0; }
.co-form { display: flex; flex-wrap: wrap; gap: .9em; align-content: start; }
.co-form > b, .co-sum > b { width: 100%; font: 800 1.4em var(--f-display); }
.co-card { width: 100%; aspect-ratio: 2.4; border-radius: 1.2em; padding: 1.2em; background: linear-gradient(130deg, var(--ink), color-mix(in srgb, var(--a) 70%, var(--ink))); color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.co-chip { width: 3em; height: 2.2em; border-radius: .4em; background: linear-gradient(135deg, #F4D27A, #C99A2E); }
.co-num { font: 600 1.35em var(--f-mono); letter-spacing: .08em; }
.co-card small { font: 500 1em var(--f-mono); opacity: .8; }
.co-form label { width: 100%; display: grid; gap: .35em; }
.co-form label.half { width: calc(50% - .45em); }
.co-form label small { font-size: .95em; color: #7A8398; }
.co-form label span { height: 2.6em; border-radius: .7em; box-shadow: inset 0 0 0 .12em #E1E5EE; }
.co-secure { display: flex; gap: .5em; align-items: center; font-size: 1em; color: #0E7A48; font-weight: 600; }
.co-sum { background: #F6F8FC; border-radius: 1.2em; padding: 1.4em; display: flex; flex-direction: column; gap: 1em; }
.co-item { display: grid; grid-template-columns: 3.6em 1fr auto; gap: .8em; align-items: center; }
.co-item > i { aspect-ratio: 1; border-radius: .8em; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 50%, #0B1020)); }
.co-item span { display: grid; gap: .4em; }
.co-item b { height: .6em; width: 80%; border-radius: 1em; background: #D9DEE8; }
.co-item small { height: .5em; width: 50%; border-radius: 1em; background: #E6E9F0; }
.co-item em { font-style: normal; font-weight: 700; font-size: 1.1em; }
.co-tot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; border-top: .1em dashed #D9DEE8; padding-top: .9em; font-size: 1.1em; }
.co-tot strong { font: 900 1.8em var(--f-display); }
.co-pay { text-align: center; background: var(--a); color: #fff; font-weight: 800; font-size: 1.15em; padding: .85em; border-radius: .9em; box-shadow: 0 1.4em 2.4em -1.2em var(--a); }

/* ---------- CI/CD pipeline ---------- */
.pl { width: 100%; height: 100%; color: #D7DDEE; display: flex; flex-direction: column; gap: 2em; justify-content: center; }
.pl-head { display: flex; gap: 1em; align-items: baseline; font-size: 1.2em; }
.pl-head b { font: 600 1.05em var(--f-mono); color: #fff; }
.pl-head span { color: #8A93A8; }
.pl-stages { display: flex; align-items: center; }
.pl-stage { flex: none; display: grid; justify-items: center; gap: .5em; text-align: center; font-size: 1.1em; }
.pl-stage > span { width: 4.4em; height: 4.4em; border-radius: 1.3em; display: grid; place-items: center; background: #18B26B; color: #fff; box-shadow: 0 0 0 .4em rgba(24, 178, 107, .18); }
.pl-stage.run > span { background: var(--a); box-shadow: 0 0 0 .4em color-mix(in srgb, var(--a) 30%, transparent), 0 0 2.4em var(--a); }
.pl-stage .vx-ic { width: 2em; height: 2em; stroke-width: 3; }
.pl-stage small { color: #6E7898; font-family: var(--f-mono); }
.pl-spin { width: 1.8em; height: 1.8em; border-radius: 50%; border: .3em solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin 1s linear infinite; }
.pl-link { flex: 1; height: .3em; border-radius: 1em; background: #18B26B; margin: 0 .8em 3em; }
.pl-link.run { background: linear-gradient(90deg, #18B26B, var(--a)); }
.pl-bottom { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4em; }
.pl-console { background: #05080F; border-radius: 1.2em; padding: 1.2em 1.4em; font: 400 1.15em/1.8 var(--f-mono); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .06); }
.pl-log { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-log.run { color: var(--lime); }
.pl-envs { display: grid; gap: .9em; }
.pl-envs div { display: grid; grid-template-columns: 1em 1fr auto; gap: .8em; align-items: center; background: rgba(255, 255, 255, .05); border-radius: 1em; padding: 1em 1.2em; font-size: 1.1em; box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .06); }
.pl-envs i { width: .9em; height: .9em; border-radius: 50%; background: #18B26B; }
.pl-envs i.run { background: var(--a); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--a) 30%, transparent); }
.pl-envs small { color: #8A93A8; font-family: var(--f-mono); }

/* ---------- Component library ---------- */
.cp { width: 100%; height: 100%; background: #fff; border-radius: 1.6em; box-shadow: 0 3em 6em -2.5em rgba(10, 15, 31, .35), 0 0 0 .1em #E9ECF3; padding: 1.6em; display: flex; flex-direction: column; gap: 1.2em; }
.cp-head { display: flex; gap: 1.2em; align-items: center; font-size: 1.1em; }
.cp-head b { font: 800 1.3em var(--f-display); margin-right: auto; }
.cp-head span { color: #8A93A8; font-weight: 600; }
.cp-head span:first-of-type { color: var(--a); }
.cp-grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; min-height: 0; }
.cp-cell { border-radius: 1em; background: #F7F8FB; box-shadow: inset 0 0 0 .1em #EEF0F5; padding: 1em; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: .7em; }
.cp-cell small { width: 100%; font-size: .9em; color: #8A93A8; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cp-btn { background: var(--a); color: #fff; font-weight: 700; font-size: 1.05em; border-radius: .7em; padding: .55em 1em; }
.cp-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .12em #D5DAE5; }
.cp-in { width: 100%; height: 2.4em; border-radius: .7em; background: #fff; box-shadow: inset 0 0 0 .12em var(--a); display: flex; align-items: center; padding: 0 .8em; }
.cp-in i { width: 50%; height: .5em; border-radius: 1em; background: #D9DEE8; }
.cp-in.err { box-shadow: inset 0 0 0 .12em #E5484D; }
.cp-tg { width: 3.2em; height: 1.8em; border-radius: 1em; background: #D5DAE5; position: relative; }
.cp-tg::after { content: ""; position: absolute; top: .25em; left: .25em; width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; }
.cp-tg.on { background: var(--green); } .cp-tg.on::after { left: auto; right: .25em; }
.cp-ck { width: 1.8em; height: 1.8em; border-radius: .5em; box-shadow: inset 0 0 0 .14em #CBD2DF; display: grid; place-items: center; color: #fff; }
.cp-ck.on { background: var(--a); box-shadow: none; }
.cp-ck .vx-ic { width: 1.2em; height: 1.2em; stroke-width: 3; }
.cp-bd { font-size: .95em; font-weight: 700; padding: .3em .7em; border-radius: 99em; }
.cp-bd.a { background: color-mix(in srgb, var(--a) 14%, #fff); color: var(--a); } .cp-bd.g { background: #E3F8EE; color: #0E7A48; } .cp-bd.r { background: #FFE9EA; color: #C2272D; }
.cp-avs { display: flex; align-items: center; }
.cp-avs i { width: 2.4em; height: 2.4em; border-radius: 50%; box-shadow: 0 0 0 .2em #F7F8FB; margin-right: -.6em; background: linear-gradient(135deg, var(--a), #19B6FF); }
.cp-avs i:nth-child(2) { background: linear-gradient(135deg, #FF2E88, #FF8BBE); }
.cp-avs i:nth-child(3) { background: linear-gradient(135deg, #18B26B, #6EE0A5); }
.cp-avs em { margin-left: 1em; font-style: normal; font-weight: 700; color: #7A8398; }
.cp-sl { width: 100%; height: .5em; border-radius: 1em; background: #E1E5EE; position: relative; }
.cp-sl i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--a); border-radius: 1em; }
.cp-sl i::after { content: ""; position: absolute; right: -.7em; top: 50%; transform: translateY(-50%); width: 1.4em; height: 1.4em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .15em var(--a); }
.cp-tokens { display: flex; align-items: center; gap: .6em; }
.cp-tokens i { width: 2.2em; height: 2.2em; border-radius: .6em; }
.cp-tokens span { margin-left: auto; font: 500 1em var(--f-mono); color: #8A93A8; }

/* ---------- Journey map ---------- */
.jr { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1.2em; }
.jr-persona { display: flex; gap: .9em; align-items: center; align-self: flex-start; background: #fff; border-radius: 1.2em; padding: .8em 1.2em .8em .8em; box-shadow: 0 1.5em 3em -1.5em rgba(60, 40, 10, .3); font-size: 1.1em; }
.jr-persona i { width: 2.8em; height: 2.8em; border-radius: 50%; background: linear-gradient(135deg, #FF7A1A, #FFB36B); }
.jr-persona b { display: block; }
.jr-persona small { color: #7A7064; }
.jr-board { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1em; }
.jr-col { display: flex; flex-direction: column; gap: .9em; border-left: .12em dashed #D6CCBB; padding-left: 1em; }
.jr-col:first-child { border-left: 0; padding-left: 0; }
.jr-col > b { font: 800 1.15em var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: #4A4136; }
.jr-col > i { display: grid; gap: .5em; padding: .9em; background: var(--c); border-radius: .3em; transform: rotate(var(--r)); box-shadow: 0 .8em 1.4em -.8em rgba(60, 40, 10, .4); aspect-ratio: 1.2; align-content: start; }
.jr-col > i b { height: .5em; border-radius: 1em; background: rgba(0, 0, 0, .25); }
.jr-curve { position: absolute; left: 0; right: 0; bottom: 4%; height: 36%; width: 100%; pointer-events: none; }
.jr-curve polyline { fill: none; stroke: var(--a); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jr-legend { position: absolute; right: 0; top: 0; display: flex; gap: .4em; font-size: 1.6em; background: #fff; border-radius: 99em; padding: .2em .5em; }

/* ---------- AI evaluation ---------- */
.ev { width: 100%; height: 100%; background: #fff; border-radius: 1.6em; padding: 1.6em 1.8em; box-shadow: 0 3em 6em -2.5em rgba(40, 20, 120, .35); display: flex; flex-direction: column; gap: 1.4em; }
.ev-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.15em; }
.ev-pass { display: inline-flex; gap: .4em; align-items: center; background: #E3F8EE; color: #0E7A48; font-weight: 800; padding: .35em .8em; border-radius: 99em; }
.ev-pass .vx-ic { width: 1.2em; height: 1.2em; stroke-width: 3; }
.ev-body { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.6em; min-height: 0; }
.ev-chart { display: flex; align-items: flex-end; gap: 1em; border-bottom: .12em solid #E6E8F0; padding-bottom: .2em; }
.ev-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .5em; }
.ev-bar i { width: 100%; border-radius: .6em .6em .2em .2em; background: color-mix(in srgb, var(--a) 25%, #EDEBFA); }
.ev-bar.on i { background: linear-gradient(180deg, var(--a), color-mix(in srgb, var(--a) 60%, #fff)); box-shadow: 0 1em 2em -1em var(--a); }
.ev-bar small { font-size: .95em; color: #8A93A8; font-weight: 600; }
.ev-side { display: flex; flex-direction: column; gap: .9em; }
.ev-side > small { color: #8A93A8; font-weight: 600; }
.ev-dots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .45em; }
.ev-dots i { aspect-ratio: 1; border-radius: .35em; background: #18B26B; }
.ev-dots i.no { background: #F2A3A6; }
.ev-chips { display: flex; flex-wrap: wrap; gap: .5em; margin-top: auto; }
.ev-chips span { font: 600 1em var(--f-mono); background: #F2F1FB; padding: .35em .7em; border-radius: .6em; }

/* ---------- Wireframes ---------- */
.wf { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 3em; align-items: center; }
.wf-s { background: #fff; border-radius: 1.2em; padding: 1.2em; display: grid; gap: .8em; box-shadow: 0 0 0 .15em #CFC6B6, 0 1.6em 3em -2em rgba(60, 40, 10, .35); }
.wf-s.a { aspect-ratio: .56; } .wf-s.b { aspect-ratio: .78; } .wf-s.c { aspect-ratio: .56; transform: translateY(6%); }
.wf-img { aspect-ratio: 1.4; border-radius: .6em; background: linear-gradient(to top right, transparent calc(50% - .08em), #CFC6B6 50%, transparent calc(50% + .08em)), linear-gradient(to top left, transparent calc(50% - .08em), #CFC6B6 50%, transparent calc(50% + .08em)), #F3EFE7; box-shadow: inset 0 0 0 .12em #CFC6B6; }
.wf-s span { height: .7em; border-radius: 1em; background: #DCD4C6; }
.wf-btn { height: 2.2em; border-radius: .6em; box-shadow: inset 0 0 0 .15em var(--a); margin-top: auto; }
.wf-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wf-arrows path { fill: none; stroke: var(--a); stroke-width: 2.2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.wf-note { position: absolute; width: 2.4em; height: 2.4em; border-radius: 50%; background: #FF7A1A; color: #fff; font: 800 1.1em/2.4em var(--f-body); text-align: center; box-shadow: 0 .6em 1.2em -.4em rgba(255, 122, 26, .6); }
.wf-note.n1 { left: 22%; top: 14%; } .wf-note.n2 { left: 58%; top: 10%; } .wf-note.n3 { right: 4%; bottom: 14%; }
.wf-tag { position: absolute; left: 0; bottom: 0; font: 600 1.1em var(--f-mono); color: #7A7064; }

/* ---------- Sprint board ---------- */
.kb { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1.2em; }
.kb-head { display: flex; align-items: center; gap: 1.2em; font-size: 1.15em; }
.kb-head b { font: 800 1.35em var(--f-display); }
.kb-burn svg { width: 7em; height: 2.2em; }
.kb-burn path { fill: none; stroke: var(--a); stroke-width: 2; }
.kb-days { margin-left: auto; font-weight: 700; color: var(--a); background: #fff; padding: .3em .8em; border-radius: 99em; }
.kb-cols { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; min-height: 0; }
.kb-col { background: rgba(255, 255, 255, .55); border-radius: 1.2em; padding: .9em; display: flex; flex-direction: column; gap: .7em; box-shadow: inset 0 0 0 .1em rgba(10, 15, 31, .05); }
.kb-col > b { display: flex; justify-content: space-between; font-size: 1.05em; }
.kb-col > b small { color: #8A93A8; }
.kb-card { background: #fff; border-radius: .9em; padding: .8em; display: grid; gap: .45em; box-shadow: 0 .4em 1em -.5em rgba(10, 15, 31, .25); }
.kb-card em { justify-self: start; font-style: normal; font-size: .85em; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); padding: .15em .55em; border-radius: .4em; }
.kb-card > span { height: .5em; border-radius: 1em; background: #E1E5EE; }
.kb-card div { display: flex; justify-content: space-between; align-items: center; margin-top: .2em; }
.kb-card div i { width: 1.5em; height: 1.5em; border-radius: 50%; background: linear-gradient(135deg, var(--a), #FF2E88); }
.kb-card small { font-size: .85em; color: #8A93A8; font-weight: 700; }
.kb-card .vx-ic { width: 1.3em; height: 1.3em; color: var(--green); stroke-width: 3; }

/* ---------- Release & status ---------- */
.ln { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1.2em; justify-content: center; }
.ln-status { display: grid; grid-template-columns: auto 1fr; column-gap: 1em; align-items: center; background: #fff; border-radius: 1.4em; padding: 1.3em 1.6em; box-shadow: 0 2em 4em -2em rgba(10, 60, 40, .35); }
.ln-status b { font: 800 1.5em var(--f-display); }
.ln-status small { grid-column: 2; color: #7A8398; font-size: 1.05em; }
.ln-dot { grid-row: span 2; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .6em rgba(24, 178, 107, .18); }
.ln-up { background: #fff; border-radius: 1.4em; padding: 1.2em 1.6em; box-shadow: 0 2em 4em -2em rgba(10, 60, 40, .25); }
.ln-up-h { display: flex; justify-content: space-between; font-size: 1.1em; font-weight: 700; margin-bottom: .8em; }
.ln-up-h em { font-style: normal; color: #0E7A48; }
.ln-bars { display: flex; gap: .3em; height: 3.2em; }
.ln-bars i { flex: 1; border-radius: .3em; background: #3CCB84; }
.ln-bars i.warn { background: var(--amber); }
.ln-release { display: flex; gap: 1.2em; align-items: flex-start; background: #0B1020; color: #fff; border-radius: 1.4em; padding: 1.3em 1.6em; }
.ln-rocket { width: 3.4em; height: 3.4em; border-radius: 1em; display: grid; place-items: center; background: var(--a); flex: none; }
.ln-rocket .vx-ic { width: 1.9em; height: 1.9em; }
.ln-release b { font-size: 1.25em; }
.ln-release ul { list-style: none; padding: 0; margin: .5em 0 0; display: flex; flex-wrap: wrap; gap: .4em 1.2em; font-size: 1.05em; color: #C9D0E0; }
.ln-release li { display: flex; gap: .4em; align-items: center; }
.ln-release li .vx-ic { width: 1.2em; height: 1.2em; color: var(--lime); stroke-width: 3; }

/* ---------- Growth ---------- */
.gr { width: 100%; height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6em; }
.gr-funnel, .gr-ab { background: #fff; border-radius: 1.6em; padding: 1.6em; box-shadow: 0 3em 5em -2.5em rgba(10, 60, 40, .3); display: flex; flex-direction: column; gap: .9em; }
.gr-t { font: 800 1.2em var(--f-display); margin-bottom: .2em; }
.gr-step { position: relative; display: flex; justify-content: space-between; align-items: center; height: 3.4em; padding: 0 1em; font-size: 1.1em; }
.gr-step span { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); border-radius: .8em; background: color-mix(in srgb, var(--a) 22%, #EAF7F1); }
.gr-step:last-child span { background: var(--a); }
.gr-step b, .gr-step em { position: relative; font-style: normal; }
.gr-step:last-child b, .gr-step:last-child em { color: #fff; }
.gr-step em { font-weight: 800; }
.gr-var { display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: 1em; background: #F4F6F9; font-size: 1.1em; }
.gr-var span { width: 2.2em; height: 2.2em; border-radius: .7em; display: grid; place-items: center; background: #DDE2EA; font-weight: 800; }
.gr-var em { font-style: normal; font: 800 1.4em var(--f-display); }
.gr-var.win { background: color-mix(in srgb, var(--a) 12%, #fff); box-shadow: inset 0 0 0 .12em var(--a); }
.gr-var.win span { background: var(--a); color: #fff; }
.gr-var i { margin-left: auto; font-size: .9em; font-weight: 800; color: var(--a); }
.gr-ab svg { width: 100%; flex: 1; min-height: 3em; }
.gr-ab .a { fill: color-mix(in srgb, var(--a) 18%, transparent); }
.gr-ab .l { fill: none; stroke: var(--a); stroke-width: 2.4; vector-effect: non-scaling-stroke; }

/* ---------- Pull request ---------- */
.gt { width: 100%; height: 100%; background: #0D1224; border-radius: 1.6em; padding: 1.6em; color: #D7DDEE; display: flex; flex-direction: column; gap: 1em; box-shadow: 0 3em 6em -2.5em rgba(0, 0, 0, .7), 0 0 0 .1em rgba(255, 255, 255, .06); }
.gt-head { display: flex; gap: 1em; align-items: center; font-size: 1.25em; }
.gt-head b { color: #fff; }
.gt-open { display: inline-flex; align-items: center; gap: .4em; background: #18B26B; color: #fff; font-weight: 700; font-size: .85em; padding: .35em .8em; border-radius: 99em; }
.gt-open .vx-ic { width: 1.1em; height: 1.1em; }
.gt-tabs { display: flex; gap: 1.6em; font-size: 1.05em; border-bottom: .1em solid #1E2744; padding-bottom: .7em; color: #6E7898; }
.gt-tabs .on { color: #fff; box-shadow: 0 .75em 0 -.55em var(--a); }
.gt-tabs em { font-style: normal; color: #3DDC97; }
.gt-file { background: #0A0F1E; border-radius: 1em; overflow: hidden; box-shadow: inset 0 0 0 .1em #1E2744; font: 400 1.12em/1.75 var(--f-mono); }
.gt-fn { padding: .6em 1em; background: #121934; color: #AEB6CC; font-size: .92em; }
.gt-fn em { font-style: normal; color: #3DDC97; }
.gt-l { display: grid; grid-template-columns: 2.4em 1.4em 1fr; white-space: nowrap; overflow: hidden; }
.gt-l em { font-style: normal; color: #3E4868; text-align: right; padding-right: .6em; }
.gt-l span { overflow: hidden; text-overflow: ellipsis; }
.gt-l.add { background: rgba(61, 220, 151, .1); } .gt-l.add i { color: #3DDC97; }
.gt-l.del { background: rgba(229, 72, 77, .12); } .gt-l.del i { color: #FF7B80; }
.gt-comment { display: flex; gap: .8em; align-items: flex-start; font-size: 1.1em; }
.gt-comment i { width: 2.4em; height: 2.4em; border-radius: 50%; background: linear-gradient(135deg, var(--a), #FF2E88); flex: none; }
.gt-comment span { background: #151C36; border-radius: 1em; padding: .8em 1em; }
.gt-comment b { display: block; color: #fff; font-size: .9em; }
.gt-checks { display: flex; gap: .5em; align-items: center; color: #3DDC97; font-weight: 700; font-size: 1.1em; }

/* ---------- Type specimen ---------- */
.tk { width: 100%; height: 100%; display: grid; grid-template-columns: .9fr 1.3fr; grid-template-rows: 1fr auto auto; gap: 1.2em 1.8em; }
.tk-aa { grid-row: span 2; background: var(--ink); color: #fff; border-radius: 1.6em; display: flex; flex-direction: column; justify-content: space-between; padding: 1.6em; }
.tk-aa b { font: 900 9em/1 var(--f-display); letter-spacing: -.04em; background: linear-gradient(120deg, #fff, var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tk-aa small { color: #AEB6CC; font-size: 1.1em; }
.tk-scale { display: grid; align-content: space-between; }
.tk-row { display: grid; grid-template-columns: 4em 1fr; align-items: baseline; border-bottom: .1em solid #E7EAF1; padding: .3em 0; }
.tk-row small { font: 600 .95em var(--f-mono); color: #8A93A8; }
.tk-row span { font-family: var(--f-display); font-weight: 800; white-space: nowrap; overflow: hidden; }
.tk-swatches { display: flex; gap: .8em; }
.tk-sw { flex: 1; display: grid; gap: .4em; }
.tk-sw i { aspect-ratio: 1.3; border-radius: .8em; box-shadow: inset 0 0 0 .1em rgba(0, 0, 0, .06); }
.tk-sw small { font-size: .95em; color: #7A8398; font-weight: 600; }
.tk-space { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 1em; }
.tk-space small { font: 600 .95em var(--f-mono); color: #8A93A8; margin-right: .6em; }
.tk-space i { height: 1.6em; background: color-mix(in srgb, var(--a) 30%, #fff); box-shadow: inset 0 0 0 .1em var(--a); border-radius: .3em; }

/* ---------- Semantic search ---------- */
.se { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1.4em; }
.se-bar { display: flex; align-items: center; gap: .9em; background: #fff; border-radius: 99em; padding: 1em 1.4em; font-size: 1.25em; box-shadow: 0 2em 4em -2em rgba(40, 20, 120, .35), 0 0 0 .12em color-mix(in srgb, var(--a) 40%, transparent); }
.se-bar .vx-ic { color: var(--a); }
.se-bar em { margin-left: auto; font-style: normal; font-size: .8em; font-weight: 800; color: var(--a); background: color-mix(in srgb, var(--a) 12%, #fff); padding: .3em .7em; border-radius: 99em; }
.se-body { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4em; min-height: 0; }
.se-results { display: grid; gap: .8em; align-content: start; }
.se-r { display: grid; grid-template-columns: 2.6em 1fr 7em; gap: .9em; align-items: center; background: #fff; border-radius: 1em; padding: .8em 1em; box-shadow: 0 .6em 1.4em -.8em rgba(40, 20, 120, .3); font-size: 1.05em; }
.se-r > i { width: 2.6em; height: 2.6em; border-radius: .8em; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 12%, #fff); color: var(--a); }
.se-r span { display: grid; gap: .4em; }
.se-r small { height: .5em; width: 70%; border-radius: 1em; background: #E5E8F0; }
.se-r em { font: 600 .9em var(--f-mono); color: #7A8398; display: grid; gap: .3em; }
.se-r u { display: block; height: .45em; border-radius: 1em; background: var(--a); }
.se-space { position: relative; background: #fff; border-radius: 1.2em; box-shadow: 0 1em 2em -1em rgba(40, 20, 120, .25); }
.se-space small { position: absolute; left: 1em; top: .8em; color: #8A93A8; font-weight: 600; }
.se-space i { position: absolute; width: .9em; height: .9em; border-radius: 50%; background: #CBD2E4; transform: translate(-50%, -50%); }
.se-space i.hit { background: var(--a); box-shadow: 0 0 0 .4em color-mix(in srgb, var(--a) 25%, transparent); }

/* ---------- Developer profile ---------- */
.cr { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 2fr; gap: 1.6em; align-items: center; }
.cr-card { background: #fff; border-radius: 1.6em; padding: 2em 1.4em; text-align: center; display: grid; justify-items: center; gap: .5em; box-shadow: 0 3em 5em -2.5em rgba(10, 15, 31, .35); font-size: 1.1em; }
.cr-av { width: 6em; height: 6em; border-radius: 50%; background: linear-gradient(135deg, var(--a), #6EE0A5); box-shadow: 0 0 0 .4em #fff, 0 0 0 .55em color-mix(in srgb, var(--a) 40%, transparent); margin-bottom: .5em; }
.cr-card small { color: #18B26B; font-weight: 700; }
.cr-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; margin-top: .5em; }
.cr-badges span { font-size: .85em; font-weight: 700; background: #F1F3F8; padding: .25em .6em; border-radius: .5em; }
.cr-main { display: grid; gap: 1.2em; }
.cr-graph { background: #fff; border-radius: 1.4em; padding: 1.2em 1.4em; box-shadow: 0 2em 4em -2em rgba(10, 15, 31, .3); }
.cr-graph small { display: block; color: #7A8398; font-weight: 600; margin-bottom: .8em; font-size: 1.05em; }
.cr-cells { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); grid-auto-flow: column; gap: .3em; }
.cr-cells i { aspect-ratio: 1; border-radius: .25em; background: #EBEDF2; }
.cr-cells .l1 { background: color-mix(in srgb, var(--a) 28%, #fff); } .cr-cells .l2 { background: color-mix(in srgb, var(--a) 50%, #fff); } .cr-cells .l3 { background: color-mix(in srgb, var(--a) 75%, #fff); } .cr-cells .l4 { background: var(--a); }
.cr-repos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.cr-repo { background: #fff; border-radius: 1em; padding: .9em 1em; display: grid; gap: .5em; box-shadow: 0 1em 2em -1.2em rgba(10, 15, 31, .3); font-size: 1.05em; }
.cr-repo b { font-family: var(--f-mono); font-size: .95em; color: var(--a); }
.cr-repo span { display: flex; align-items: center; gap: .4em; color: #7A8398; font-size: .9em; }
.cr-repo span i { width: .8em; height: .8em; border-radius: 50%; margin-right: .5em; }
.cr-repo .vx-ic { width: 1.1em; height: 1.1em; }

/* ---------- Notebook ---------- */
.nb { width: 100%; height: 100%; background: #0D1224; border-radius: 1.6em; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 3em 6em -2.5em rgba(0, 0, 0, .7), 0 0 0 .1em rgba(255, 255, 255, .06); color: #D7DDEE; }
.nb-top { display: flex; justify-content: space-between; padding: 1em 1.4em; background: #121934; font: 600 1.1em var(--f-mono); }
.nb-top span { color: #F4B740; }
.nb-cell, .nb-out { display: grid; grid-template-columns: 5.5em 1fr; gap: .8em; padding: 1.2em 1.4em; }
.nb-cell em, .nb-out em { font: 600 1em var(--f-mono); font-style: normal; color: #5C6A8F; }
.nb-cell code { font: 400 1.2em/1.7 var(--f-mono); background: #0A0F1E; border-radius: .8em; padding: .8em 1em; box-shadow: inset 0 0 0 .1em #1E2744; }
.nb-cell code i { font-style: normal; }
.nb-out { flex: 1; min-height: 0; }
.nb-out em { color: #F78C6C; }
.nb-plot { position: relative; background: #fff; border-radius: .8em; }
.nb-plot i { position: absolute; width: .9em; height: .9em; border-radius: 50%; background: var(--a); opacity: .75; transform: translate(-50%, -50%); }
.nb-plot i.b { background: #FF2E88; }
.nb-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb-plot path { stroke: #0B1020; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

/* ---------- Widget tree ---------- */
.wg { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2em; align-items: center; }
.wg-tree { background: #0D1224; color: #D7DDEE; border-radius: 1.6em; padding: 1.6em; display: grid; gap: .5em; font: 500 1.15em var(--f-mono); box-shadow: 0 3em 5em -2.5em rgba(0, 0, 0, .6); }
.wg-tree small { color: #6E7898; margin-bottom: .4em; font-family: var(--f-body); font-weight: 600; }
.wg-node { padding: .3em .7em; margin-left: calc(var(--d) * 1.4em); border-radius: .5em; border-left: .15em solid #2A3354; }
.wg-node.on { background: color-mix(in srgb, var(--a) 30%, transparent); color: #fff; border-left-color: var(--a); }
.wg-phone.vx-phone { position: relative; top: auto; left: auto; transform: none; width: 80%; justify-self: center; }
.wg-phone .vx-screen { padding-top: 3.4em; gap: 1em; }
.wg-app { height: 3.4em; border-radius: 1em; background: var(--a); display: flex; align-items: center; padding: 0 1em; }
.wg-app b { width: 45%; height: .7em; border-radius: 1em; background: rgba(255, 255, 255, .7); }
.wg-card { background: #fff; border-radius: 1em; padding: 1em; display: grid; gap: .5em; box-shadow: 0 .4em 1em rgba(10, 15, 31, .08); }
.wg-card span { height: .6em; border-radius: 1em; background: #E1E5EE; }
.wg-li { display: flex; gap: .7em; align-items: center; }
.wg-li i { width: 2.2em; height: 2.2em; border-radius: 50%; background: color-mix(in srgb, var(--a) 25%, #fff); }
.wg-li span { flex: 1; height: .6em; border-radius: 1em; background: #E1E5EE; }
.wg-fab { position: absolute; right: 1.4em; bottom: 1.8em; width: 3.4em; height: 3.4em; border-radius: 1.1em; background: var(--a); color: #fff; font-size: 1.4em; display: grid; place-items: center; box-shadow: 0 1em 2em -.8em var(--a); }
.wg-hot { position: absolute; left: 0; bottom: 2%; font: 600 1.1em var(--f-mono); color: var(--a); background: #fff; padding: .4em .9em; border-radius: 99em; box-shadow: 0 1em 2em -1em rgba(10, 15, 31, .3); }

/* ---------- Photo scene placeholder ---------- */
.ph-scene, .ph-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Illustrated avatar ---------- */
.avatar-art { display: block; width: 100%; height: 100%; }

/* fixes */
.wf { grid-template-rows: 100%; }
.wf-s.a, .wf-s.b, .wf-s.c { aspect-ratio: auto; align-self: center; }
.wf-s.a, .wf-s.c { height: 78%; } .wf-s.b { height: 94%; } .wf-s.c { transform: translateY(5%); }
.wg { grid-template-rows: 100%; }
.wg-phone.vx-phone { width: auto; height: 94%; aspect-ratio: 9/19; align-self: center; }
.th-head { box-shadow: none; overflow: visible; }
.th-head::before { content: ""; position: absolute; left: -6%; right: -6%; top: -8%; height: 48%; border-radius: 50% 50% 35% 35%; background: var(--hair, #2B1E17); }
.th-self .th-head { --hair: #121212; box-shadow: none; }
.th-person { width: 50%; height: 78%; }