@font-face{font-family:'Manrope';src:url(fonts/manrope-latin-wght-normal.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url(fonts/manrope-cyrillic-wght-normal.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:100;max-width:calc(100vw - 32px);box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;width:max-content;border-radius:22px;background:#FFFFFF;color:#121212;font-size:14px;line-height:20px;font-weight:500;box-shadow:0 0 0 1px var(--line,rgba(0,0,0,.12));opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.33,1,.68,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{flex:none;color:#1E9E45}
@media (prefers-reduced-motion: reduce){.toast{transition:opacity .2s;transform:translate(-50%,0)}}

.t-dark{--bg:#0E0E10;--surface:#17171A;--line:#2A2A2F;--line2:#3A3A41;--ink:#F2F2F3;--ink2:#A1A1A8;--mute:#7A7A82;--hover:#1E1E22;--btn:#F2F2F3;--btn-ink:#0E0E10;--rc-bg:#17171A;--tag-bg:#1E1E22;--tag-ink:#A1A1A8}
.t-light{--bg:#FFFFFF;--surface:#F5F5F7;--line:#E3E3E8;--line2:#D3D3DA;--ink:#111113;--ink2:#6B6B73;--mute:#83838C;--hover:#EDEDF0;--btn:#111113;--btn-ink:#FFFFFF;--rc-bg:#F5F5F7;--tag-bg:#EDEDF0;--tag-ink:#6B6B73}
:root{--font:'Manrope',-apple-system,'Helvetica Neue',Arial,sans-serif;--font-h:var(--font);--gutter:clamp(20px,10.4vw,200px);--maxw:1520px;--r-xs:10px;--r-sm:14px;--r-md:18px;--r-lg:24px;--r-xl:32px;--r-2xl:44px;--r-3xl:56px}
@media (max-width: 1024px){:root{--gutter:clamp(20px,5vw,48px)}}

.site-head{position:fixed;top:max(12px,env(safe-area-inset-top));left:0;right:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px 8px;box-sizing:border-box;padding:0 var(--gutter);color:#FFFFFF;font-size:14px;line-height:20px;pointer-events:none}
.sh-nav,.site-head .clock,.site-head .seg{pointer-events:auto}
.sh-nav,.site-head .seg,.site-head .clock{box-sizing:border-box;height:52px;padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#17171A}
.sh-nav{grid-column:2;grid-row:1;display:flex;align-items:center;gap:2px}
.sh-i{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:999px;color:#A3A3A3;font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.sh-i:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
.sh-i.on,.sh-i.on:hover{background:#FFFFFF;color:#121212}
.sh-right{display:contents}
.site-head .clocks{grid-column:1;grid-row:1;justify-self:start;transition:opacity .2s,transform .2s}
.sh-right>div:last-child{grid-column:3;grid-row:1;justify-self:end;gap:8px !important;transition:opacity .2s,transform .2s}
.up-fab{border-radius:15px;box-shadow:none}
.met{box-shadow:none}
.site-head :focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.site-head .clock{min-height:0;padding:0 16px;color:#A3A3A3}
.site-head .clock .lbl{color:#A3A3A3}
.site-head .clock b{color:#FFFFFF}
.site-head .seg{gap:2px}
.site-head .seg button{width:48px;min-width:0;height:40px;padding:0;border-radius:999px;color:#A3A3A3;background:transparent;font-size:14px}
.site-head .seg button:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
.site-head .seg button[aria-pressed="true"],.site-head .seg button[aria-pressed="true"]:hover{background:#FFFFFF;color:#121212}
@media (max-width: 720px){
.site-head{top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;display:flex;align-items:center;gap:2px;padding:4px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(40,40,44,.42);color:#FFFFFF;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05);pointer-events:auto}
.t-light .site-head{border-color:rgba(0,0,0,.08);background:rgba(255,255,255,.5);color:#18181A;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.sh-nav{flex:1;height:auto;gap:2px;padding:0;border:0;background:none}
.sh-i{flex:1;min-width:0;height:44px;padding:0 2px;border-radius:999px;color:inherit;opacity:.72;font-size:14px;line-height:20px}
.sh-i:hover{background:none;color:inherit}
.sh-i.on,.sh-i.on:hover{background:rgba(255,255,255,.2);color:inherit;opacity:1}
.t-light .sh-i.on,.t-light .sh-i.on:hover{background:rgba(255,255,255,.85)}
.site-head .clocks{display:none !important}
.sh-right>div:last-child{display:flex;gap:2px !important}
.site-head .seg{height:44px;padding:0;border:0;background:none}
.site-head .seg button{width:42px;height:44px;padding:0;border-radius:999px;color:inherit;font-size:12px}
.site-head .seg .s-ru,.site-head .seg .s-en{width:56px}
.site-head .seg button[aria-pressed="true"]{display:none}
.hero{padding-top:64px !important;padding-bottom:96px !important}
#top,.case-crumb{padding-top:24px !important}
#top{padding-bottom:96px !important}
.case-foot{padding-bottom:96px !important}
.up-fab{bottom:80px}
.toast{bottom:calc(80px + env(safe-area-inset-bottom))}
}

.xh{padding:34px 38px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);background:#17171A;color:#FFFFFF}
.xhd{padding:0 0 26px;border-bottom:1px solid rgba(255,255,255,.1);color:#FFFFFF;font-family:var(--font-h);font-size:clamp(24px,2.2vw,32px);line-height:1;font-weight:600;letter-spacing:-.02em;text-transform:none;text-align:left}
.xrow{grid-template-columns:minmax(0,1fr) 150px 180px;align-items:center;gap:6px 48px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.xrow:last-child{border-bottom:0;padding-bottom:0}
.xy{font-size:14px;line-height:20px;color:#A1A1A8;font-variant-numeric:tabular-nums;white-space:nowrap}
.xm{order:-1;min-width:0;display:flex;align-items:center;gap:18px}
.xt{min-width:0}
.xl{flex:none;width:48px;height:48px;border-radius:12px;box-shadow:none}
.xn{font-family:var(--font-h);font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.xnow{gap:7px;padding:3px 10px 3px 9px;border-radius:999px;background:rgba(253,195,0,.13);color:#FDC300;font-family:var(--font);font-size:12px;line-height:16px;font-weight:600;letter-spacing:0;white-space:nowrap}
.xnow::before{background:#FDC300;animation:xnow-ping 1.8s ease-out infinite}
@keyframes xnow-ping{0%{box-shadow:0 0 0 0 rgba(0,91,255,.6)}70%,100%{box-shadow:0 0 0 7px rgba(0,91,255,0)}}
@media (prefers-reduced-motion: reduce){.xnow::before{animation:none}}
.xs{margin-top:6px;font-size:14px;line-height:1.5;font-weight:400;color:#A1A1A8}
.xr{font-size:14px;line-height:20px;font-weight:500;color:#FFFFFF;white-space:normal}
@media (max-width: 760px){
.xh{padding:24px 22px}
.xhd{padding-bottom:18px}
.xrow{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}
.xm{gap:14px;align-items:flex-start}
}

.hint-wrap{display:flex;justify-content:center}
.hint{display:inline-flex;align-items:center;gap:12px;min-height:52px;box-sizing:border-box;padding:6px 20px 6px 10px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line2);color:var(--ink);font-size:14px;line-height:20px;font-weight:500;pointer-events:auto;transition:box-shadow .2s}
.hint:hover{box-shadow:0 0 0 1px var(--ink2)}
.mouse{position:relative;flex:none;display:block;width:24px;height:36px;box-sizing:border-box;border:2px solid currentColor;border-radius:13px;animation:ms-bob 1.8s ease-in-out infinite}
.mouse i{position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#005BFF;animation:ms-wheel 1.8s cubic-bezier(.65,0,.35,1) infinite}
.mouse.sm{width:16px;height:24px;border-width:1.5px;border-radius:15px}
.mouse.sm i{top:4px;width:3px;height:5px;margin-left:-1.5px;animation-name:ms-wheel-sm}
@keyframes ms-wheel{0%{opacity:0;transform:translateY(-3px)}25%{opacity:1}70%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(11px)}}
@keyframes ms-wheel-sm{0%{opacity:0;transform:translateY(-2px)}25%{opacity:1}70%{opacity:1;transform:translateY(6px)}100%{opacity:0;transform:translateY(7px)}}
@keyframes ms-bob{50%{transform:translateY(3px)}}
@media (prefers-reduced-motion: reduce){.mouse,.mouse i{animation:none}}

.bdg{--bdg-w:230px;position:relative;flex:none;width:var(--bdg-w);font-size:calc(var(--bdg-w) / 23);}
@keyframes bdg{0%,100%{rotate:-1deg}50%{rotate:1deg}}
.bdg-rig{position:relative;transform-origin:50% -240px}
@media (prefers-reduced-motion: reduce){.bdg{animation:none}.bdg-card{cursor:default;transition:none}}

@media (min-width: 901px) and (max-height: 1180px){
.hero{padding-top:70px !important;padding-bottom:8px !important;gap:10px !important}
.hero>div:first-child{gap:12px !important}
.bdg{--bdg-w:clamp(190px,24vh,230px);margin-top:12px}
.hero h1{font-size:clamp(21px,1.9vw,26px) !important;max-width:1040px !important}
.fill .btn,.fill .btn.pri,.fill .btn.git{min-height:44px}
.hint{min-height:40px;padding:2px 16px 2px 8px}
.mouse{width:20px;height:30px;border-radius:11px}
}

.bdg{margin-top:40px}
#work{scroll-margin-top:92px}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;counter-reset:cs}
.bento>*{min-width:0}
.rc-grid{display:contents}
#top>footer{margin-top:24px}
.topbar{grid-column:span 12;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 0 16px;margin-bottom:8px;border-bottom:1px solid var(--line2)}
.sw-h{margin:0;font-family:var(--font-h);font-size:clamp(36px,4vw,64px);line-height:1;font-weight:500;letter-spacing:-.035em}
.sw-n{font-size:14px;line-height:20px;color:var(--ink2)}
.rc,.rc.sm,.rc.big,.bento>.more{grid-column:span 6;min-width:0;height:clamp(280px,24vw,420px);box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--rc-bg);overflow:hidden}
.rc.big{grid-column:span 12;height:clamp(420px,40vw,680px)}
.bento>.more{grid-column:span 12;height:auto;min-height:0}
.rc{container-type:inline-size;counter-increment:cs;transition:border-color .2s}
.rc:hover{border-color:var(--line2)}
.rc-in,.rc.sm .rc-in{position:relative;display:block;height:100%;min-height:0}
.rc .rc-top,.rc.sm .rc-top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;box-sizing:border-box;width:54%;height:100%;padding:24px 0 24px 24px;text-align:left}
.rc .rc-logo{order:-1;width:36px;height:36px;margin:0 0 6px;border-radius:10px}
.rc-meta,.sw-n,.rc .met{font-variant-numeric:tabular-nums}
.rc-meta{font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.rc-meta::before{content:counter(cs,decimal-leading-zero) " · ";color:#005BFF}
.t-dark .rc-meta::before{color:#5C93FF}
.rc-co,.rc.sm .rc-co{font-family:var(--font-h);font-size:clamp(22px,2vw,32px);line-height:1.1;font-weight:500;letter-spacing:-.025em}
.rc-t,.rc.sm .rc-t{max-width:none;font-size:13px;line-height:19px;color:var(--ink2)}
.rc-m{justify-content:flex-start;gap:4px 14px;margin-top:auto}
.rc .met{align-items:baseline;gap:5px;padding:0;border-radius:0;background:none;color:var(--ink2);font-size:11px;line-height:14px}
.rc .met b{color:var(--ink);font-size:14px;line-height:18px}
.phs,.rc.sm .phs{position:absolute;left:54%;right:0;top:24px;bottom:auto;height:auto;margin:0;padding:0;justify-content:center;align-items:flex-start;background:none;transform:none}
.ph.side{display:none}
.ph.mid,.rc.sm .ph.mid{zoom:.62;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rc-in:hover .ph.mid{transform:translateY(-10px)}
.big .rc-top,.rc.big .rc-top{width:42%;padding:32px 0 32px 32px}
.big .rc-co{font-size:clamp(32px,4vw,64px);line-height:1.02;letter-spacing:-.035em}
.big .rc-t{font-size:15px;line-height:22px}
.big .phs{left:42%;top:32px}
.big .ph.side{display:flex}
.rc.big .ph.mid{zoom:.86}
.rc.big .ph.side{zoom:.8}
.bento>.more{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 24px;max-width:none;min-height:0;padding:24px;background:none;border-style:dashed;border-color:var(--line2)}
.bento>.more:hover{background:var(--hover);border-color:var(--ink2)}
.more>span:nth-child(2){font-family:var(--font-h);font-size:clamp(22px,2vw,32px) !important;line-height:1.1 !important;font-weight:500 !important;letter-spacing:-.025em !important}
.more>span:nth-child(3){font-size:13px !important;line-height:19px !important}
.more .fig{flex-basis:100%}
.more>span:nth-child(3){flex:1 1 260px}
.more .more-arr{align-self:center;margin:0 0 0 auto;border-radius:15px}
.rc-in[data-case]::after{content:"↗";position:absolute;z-index:4;right:16px;top:16px;width:40px;height:40px;border-radius:999px;background:#005BFF;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;transform:scale(.7);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.rc-in[data-case]:hover::after,.rc-in[data-case]:focus-visible::after{opacity:1;transform:translate(3px,-3px)}
@media (pointer: coarse){.rc-in[data-case]::after{opacity:1;transform:none}}
@media (max-width: 760px){
.rc,.rc.sm,.rc.big,.bento>.more{grid-column:span 12;height:auto}
.bento>.more{flex-direction:column;align-items:flex-start}
.big .rc-top,.rc.big .rc-top{width:auto;padding:20px 20px 0}
.big .rc-co{font-size:32px}
.big .phs{left:auto;top:auto}
.rc-in,.rc.sm .rc-in{display:flex;flex-direction:column}
.rc .rc-top,.rc.sm .rc-top{width:auto;height:auto;padding:20px 20px 0}
.rc-m{margin-top:6px}
.phs,.rc.sm .phs{position:relative;left:auto;top:auto;flex:none;height:230px;margin-top:20px;overflow:hidden}
.big .ph.side{display:none}
.rc.big .ph.mid{zoom:.62}
.bento>.more{padding:20px}
.more .more-arr{margin:12px 0 0}
}
@media (prefers-reduced-motion: reduce){.rc-in:hover .ph.mid{transform:none}.ph.mid{transition:none}}

html.cm-lock,html.cm-lock body{overflow:hidden}
.cm{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;box-sizing:border-box;padding:clamp(12px,4vh,40px) clamp(0px,2vw,24px) 0;background:rgba(10,10,10,.76);opacity:0;transition:opacity .2s}
.cm:not(.live){visibility:hidden;pointer-events:none}
.cm-ct{background:rgba(10,10,10,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cm.on{opacity:1}
.cm-trap{position:absolute;width:1px;height:1px;opacity:0}
.cm-panel{position:relative;width:100%;max-width:1240px;height:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg);overflow:hidden;box-shadow:0 0 0 1px var(--line);transform:translateY(32px);transition:transform .35s cubic-bezier(.33,1,.68,1)}
.cm.on .cm-panel{transform:none}
.cm iframe{display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .2s}
.cm.ready iframe{opacity:1}
.cm-panel::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border:2px solid var(--line2);border-top-color:var(--ink);border-radius:999px;animation:cm-spin .8s linear infinite}
.cm.ready .cm-panel::before{display:none}
@keyframes cm-spin{to{transform:rotate(360deg)}}
.cm-x{position:absolute;z-index:2;right:clamp(12px,2vw,20px);top:clamp(12px,2vw,20px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#17171A;color:#FFFFFF;cursor:pointer;transition:background .15s}
.cm-x:hover{background:#333333}
.cm-x:focus-visible{outline:2px solid #005BFF;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.cm,.cm-panel,.cm iframe{transition:none}.cm-panel{transform:none}.cm-panel::before{animation:none}}

.cm-ct{align-items:center;padding:16px;font-family:var(--font)}
.cm-ct .cm-panel{max-width:480px;height:auto;box-sizing:border-box;padding:28px 24px 12px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);background:#17171A;color:#FFFFFF;box-shadow:none}
.ct-h{margin:0;padding-right:48px;font-family:var(--font-h);font-size:32px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.ct-s{margin:6px 0 16px;font-size:13px;line-height:18px;color:#A3A3A3}
.ct-list{display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
.ct-row{display:flex;gap:8px}
.ct-i{flex:1;min-width:0;display:flex;align-items:center;gap:14px;box-sizing:border-box;min-height:68px;padding:10px 20px 10px 10px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:#1F1F23;color:#FFFFFF;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.ct-i:hover{background:#26262B;border-color:rgba(255,255,255,.14)}
.ct-ic{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--tint);color:#FFFFFF}
.ct-ic-mail{background:#FFFFFF;color:#005BFF}
.ct-ic-ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.ct-m{flex:1;min-width:0;display:flex;flex-direction:column}
.ct-m b{font-size:16px;line-height:22px;font-weight:600}
.ct-m span{font-size:14px;line-height:20px;color:#A3A3A3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-i i{flex:none;font-style:normal;font-size:16px;color:#A3A3A3;transition:color .15s,transform .2s}
.ct-i:hover i{color:#FFFFFF;transform:translate(2px,-2px)}
.ct-cp{flex:none;width:68px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:#1F1F23;color:#FFFFFF;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ct-cp:hover{background:color-mix(in srgb,var(--tint) 22%,#1F1F23);border-color:color-mix(in srgb,var(--tint) 45%,transparent)}
.ct-cp.done{color:#34C759}
.ct-i:focus-visible,.ct-cp:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (max-width: 720px){.ct-i{min-height:64px;gap:12px;padding-right:14px}.ct-ic{width:44px;height:44px;border-radius:12px}.ct-cp{width:56px}}
@media (prefers-reduced-motion: reduce){.ct-i,.ct-cp,.ct-i i{transition:none}.ct-i:hover i{transform:none}}
@media (max-width: 720px){.cm-ct{align-items:flex-end;padding:0}.cm-ct .cm-panel{max-width:none;padding-bottom:max(12px,env(safe-area-inset-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0}}

html.embed{--gutter:clamp(20px,5vw,64px)}
html.embed .site-head,html.embed .case-crumb,html.embed .case-next,html.embed .case-foot{display:none !important}
html.embed main>section:first-child{padding-top:64px !important}
html.embed main{padding-bottom:64px !important}
html.embed .toc{top:24px !important}
html.embed .sec{scroll-margin-top:24px}

#root{transition:color .3s !important;overflow-x:clip}
.hero{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6%203v21l5.3-5%203.6%208.2%204-1.8-3.6-8H23z%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23005BFF%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 6 3,auto;transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s}
.hero a,.hero button{cursor:pointer}
.col .hero{transform:translate3d(-12%,0,0);visibility:hidden;pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s}
#top{z-index:6 !important;background:var(--bg);box-shadow:-1px 0 0 var(--line);transform:translate3d(100%,0,0);visibility:hidden;pointer-events:none;will-change:transform;transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s}
.col #top{transform:none;visibility:visible;pointer-events:auto;transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s}
@media (prefers-reduced-motion: reduce){.hero,.col .hero,#top,.col #top{transform:none;transition:none}}

.btn{min-height:44px;border-radius:15px;font-weight:500}
.split{--sec-bg:transparent;--sec-bg-h:var(--hover);--sec-line:var(--line2);--sec-line-h:var(--ink2);--sec-ink:var(--ink);--pri:var(--ink);--pri-h:var(--ink2)}
.fill .btn,.fill .btn.pri,.fill .btn.git{min-height:48px;border-radius:15px;font-size:14px;font-weight:500}
.fill .btn.git,.fill .btn.git:hover{color:var(--bg)}
.fill .btn{gap:10px}

html,body{overscroll-behavior-y:contain}
.ptr{position:fixed;left:50%;top:-44px;z-index:70;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#17171A;opacity:0;pointer-events:none;transform:translate3d(-50%,0,0);transition:transform .2s,opacity .2s}
.ptr.on{opacity:1;transition:none}
.ptr i{width:16px;height:16px;box-sizing:border-box;border:2px solid #A3A3A3;border-top-color:transparent;border-radius:999px}
.ptr.go i{border-color:#FFFFFF;border-top-color:transparent}
.ptr.spin i{animation:cm-spin .7s linear infinite}

html.start-col .hero{visibility:hidden;transition:none !important}
html.start-col #top{transform:none;visibility:visible;pointer-events:auto;transition:none !important}
.sw-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px}

@media (max-width: 680px){.bdg{--bdg-w:clamp(190px,56vw,230px)}}
.bdg-card{--hold:rgba(255,255,255,.1);--hold-l:rgba(255,255,255,.34);position:relative;aspect-ratio:100 / 166;color:#232323;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.t-light .bdg-card{--hold:rgba(0,0,0,.05);--hold-l:rgba(0,0,0,.22)}
.bdg-card.drag{cursor:grabbing;transition:none}
.bdg-hold{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bdg-hold path{fill:var(--hold);stroke:var(--hold-l);stroke-width:1px}
.bdg-hold rect{fill:var(--bg)}
.bdg-id{position:absolute;left:4.5%;right:4.5%;top:15%;bottom:3.2%;overflow:hidden;border-radius:.9em;background:#F7F8FA;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.bdg-id::before{content:"";position:absolute;left:0;top:0;width:7.6em;height:5em;background:#FDC300;clip-path:polygon(0 0,100% 0,0 100%)}
.bdg-id::after{content:"";position:absolute;right:0;bottom:0;width:4.6em;height:12em;background:#FDC300;clip-path:polygon(100% 0,100% 100%,0 100%,0 34%)}
.bdg-ph{position:absolute;z-index:1;left:1.5em;top:2em;width:15.4em;height:15.4em;object-fit:cover;pointer-events:none}
.bdg-site{position:absolute;right:.75em;top:1.1em;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.85em;line-height:1;color:#70747A}
.bdg-tx{position:absolute;z-index:1;left:1.5em;right:2em;top:18.4em;bottom:1.3em;display:flex;flex-direction:column}
.bdg-n1{font-size:2.3em;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.bdg-n2{font-size:1.25em;line-height:1.3;font-weight:700}
.bdg-r{margin-top:auto;font-size:1.05em;line-height:1.25;font-weight:500;color:#3A3A3A}
.bdg-card::after{content:"";position:absolute;z-index:2;left:4.5%;right:4.5%;top:15%;bottom:3.2%;border-radius:.9em;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%) var(--sx,50%) 0/250% 100%;transition:background-position .25s ease-out}
@media (prefers-reduced-motion: reduce){.bdg-card{cursor:default;transition:none}}

@media (min-width: 721px){.site-head .seg .s-ru,.site-head .seg .s-en{width:74px}}

.hero h1{margin-bottom:clamp(8px,2.6vh,36px) !important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){@media (max-width: 720px){.site-head{background:rgba(30,30,34,.92)}.t-light .site-head{background:rgba(255,255,255,.94)}}}
.bdg-card{z-index:1}
.site-head .clocks{gap:8px !important}
.gh{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 16px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#17171A;color:#A3A3A3;font:inherit;font-size:13px;cursor:pointer;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:auto}
.gh[hidden]{display:none}
.gh svg{flex:none;color:#FFFFFF}
.gh:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (max-width: 1240px){.site-head .gh{display:none}}
.gh-m{display:none;flex:none;align-self:center;height:40px}
.gh-m[hidden]{display:none}
@media (max-width: 720px){.gh-m:not([hidden]){display:inline-flex}}
.gh-pop{position:absolute;z-index:50;left:0;top:calc(100% + 8px);display:none;flex-direction:column;gap:10px;box-sizing:border-box;width:236px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#17171A;color:#A3A3A3;font-size:12px;line-height:16px;text-align:left;white-space:normal;cursor:default}
.gh:hover .gh-pop,.gh.open .gh-pop{display:flex}
.gh-t{color:#FFFFFF;font-weight:600}
.gh-g{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.gh-g i{display:block;aspect-ratio:1;border-radius:4px;background:#2A2A2F}
.gh-g .l1{background:rgba(92,147,255,.35)}
.gh-g .l2{background:rgba(92,147,255,.6)}
.gh-g .l3{background:#3D7BFF}
.gh-g .l4{background:#005BFF}
.gh-m .gh-pop{left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}

.t-dark{--btn-line:#55555E}
.t-light{--btn-line:#A9A9B3}
/* Button states: secondary = outline, primary (.git) = solid. Hover never turns one into the other. */
.btn:not(.git),.fill .btn:not(.git),.fill .btn.pri:not(.git){border:1px solid var(--btn-line);background:var(--bg);color:var(--ink);box-shadow:none;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:not(.git):hover,.fill .btn:not(.git):hover,.fill .btn.pri:not(.git):hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,var(--bg));color:var(--ink);filter:none;opacity:1}
.btn:not(.git):active,.fill .btn:not(.git):active,.fill .btn.pri:not(.git):active{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 18%,var(--bg));transform:scale(.98)}
.fill .btn.git{border:1px solid var(--ink);background:var(--ink);color:var(--bg);box-shadow:none;transition:background .15s,color .15s,border-color .15s,transform .15s}
.fill .btn.git:hover{border-color:color-mix(in srgb,var(--ink) 84%,var(--bg));background:color-mix(in srgb,var(--ink) 84%,var(--bg));color:var(--bg);filter:none}
.fill .btn.git:active{border-color:color-mix(in srgb,var(--ink) 72%,var(--bg));background:color-mix(in srgb,var(--ink) 72%,var(--bg));transform:scale(.98)}
.btn:focus-visible,.fill .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
@media (prefers-reduced-motion: reduce){.btn:active,.fill .btn:active{transform:none}}
@media (min-width: 901px) and (max-height: 960px){
.xh{padding:28px 32px}
.xhd{padding:0 0 20px;font-size:24px}
.xrow{gap:6px 40px;padding:22px 0}
.xm{gap:16px}
}
.t-dark{--rib:#F2F2F3;--rib-b:#A1A1A8}
.t-light{--rib:#111113;--rib-b:#6B6B73}
.bdg-st{position:absolute;z-index:3;left:calc(50% - 12px);bottom:calc(100% - 2.4em);width:24px;height:340px;background:var(--rib)}
.bdg-bk{display:none}
.bdg-card{transform-origin:50% 5%;animation:bdg 7s ease-in-out infinite}
.bdg-card.drag{animation:none}
@media (prefers-reduced-motion: reduce){.bdg-card{animation:none}}
@media (max-width: 1023px){.toc{display:none !important}}
@media (min-width: 1024px){
main:has(.toc){--toc-w:220px;padding-left:calc(var(--gutter) + var(--toc-w) + 40px) !important}
.toc{position:fixed !important;z-index:10;left:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));top:100px !important;width:var(--toc-w,220px);max-width:none !important;max-height:calc(100vh - 124px);overflow-y:auto;font-size:14px !important;line-height:20px !important}
html.embed .toc{top:40px !important;max-height:calc(100vh - 64px)}
.toc .fig{margin-bottom:18px !important;padding-bottom:10px !important;border-bottom:1px solid var(--line) !important;color:var(--ink2)}
.toc a{display:flex;align-items:baseline;gap:12px;min-height:0;margin:0 0 18px;padding:0;border-radius:0;background:none;color:var(--ink2);transition:color .15s}
.toc a span:first-child{flex:none;width:18px;color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}
.toc a:hover{background:none;color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:500}
.toc a.on span:first-child{color:var(--ink)}
}

/* One vertical page: the intro is the first screen, the cases follow right under it (no sideways slide). */
.hero,.col .hero,html.start-col .hero{position:relative !important;inset:auto !important;z-index:1 !important;min-height:100vh;min-height:100svh;overflow:visible !important;transform:none !important;visibility:visible !important;pointer-events:auto !important;transition:none !important}
#top,.col #top,html.start-col #top{position:relative;transform:none !important;visibility:visible !important;pointer-events:auto !important;transition:none !important;box-shadow:none !important;will-change:auto}
html{scroll-behavior:auto}
/* Experience title sits outside the card, like the Cases title. */
.xtop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 0 16px;margin:clamp(24px,4vh,48px) 0 24px;border-bottom:1px solid var(--line2)}
.xh>.xrow:first-child{padding-top:0}
/* One grid for the whole site: content column = min(1520px, viewport − 2×gutter); header aligns to it too. */
.site-head{padding-left:max(var(--gutter),calc((100vw - var(--maxw)) / 2)) !important;padding-right:max(var(--gutter),calc((100vw - var(--maxw)) / 2)) !important}
/* First screen 50/50: badge centered on top, intro text on the left, experience on the right. */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"text exp" "btns exp";grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,80px);row-gap:32px;width:100%;max-width:var(--maxw);margin:0 auto;align-items:start}
.hs-text{grid-area:text;text-align:left !important;max-width:none !important;margin:0 !important;padding-top:4px}
.hs-exp{grid-area:exp}
.hs-btns{grid-area:btns;align-self:end}
.hs-exp .xtop{margin-top:0}
.hs-btns .fill{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (max-width: 900px){
.hero-split{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "btns" "exp";grid-template-rows:auto;row-gap:24px}
.hs-text{text-align:center !important}
.hs-btns .fill{grid-template-columns:minmax(0,1fr) !important}
}
@media (min-width: 901px){
.hs-exp .xrow{grid-template-columns:minmax(0,1fr) auto;gap:10px 24px}
.hs-exp .xm{grid-column:1 / -1}
.hs-exp .xy{padding-left:66px}
.hs-exp .xr{text-align:right}
}
/* Toast: dark pill, coloured round icon, white text (same in both themes). */
.toast{font-family:var(--font);gap:10px;padding:10px 20px 10px 10px;border-radius:999px;background:#1A1A1A;color:#FFFFFF;font-size:15px;line-height:20px;font-weight:600;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.toast-ic{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#5DC160;color:#1A1A1A}
.toast.err .toast-ic{background:#F2545B}
.toast .toast-ic svg{color:inherit}
/* Left column: text with the buttons right under it, top-aligned with the experience card. */
@media (min-width: 901px){
.hero-split{grid-template-rows:auto 1fr;row-gap:28px}
.hs-text{padding-top:0;margin-top:-.12em !important}
.hs-btns{align-self:start}
}
.hero h1.hs-text{margin-bottom:0 !important}
.site-head .clock .here{color:#A3A3A3;white-space:nowrap}

/* Hero: big statement text across the grid, buttons under it. */
.hero-split.hero-big{display:flex !important;flex-direction:column;align-items:stretch;gap:clamp(24px,3.5vh,40px)}
.hero .hero-big h1.hs-text{font-size:clamp(34px,4.4vw,76px) !important;line-height:1.04 !important;letter-spacing:-.04em !important;font-weight:700 !important;text-align:left !important;text-wrap:pretty;max-width:none !important;margin:0 !important}
.hero-big .hs-btns .fill{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
@media (max-width: 900px){.hero-big .hs-btns .fill{grid-template-columns:minmax(0,1fr) !important}.hero .hero-big h1.hs-text{font-size:clamp(30px,8.6vw,44px) !important}}

/* Experience: Swiss list — COMPANY · Role ——— years, description under it. */
.xp{padding:clamp(24px,4vh,48px) 0 clamp(64px,10vh,120px);scroll-margin-top:92px}
.xp-head{display:flex;align-items:center;gap:24px;margin-bottom:clamp(32px,5vh,56px)}
.xp-h{margin:0;font-family:var(--font-h);font-size:clamp(36px,4vw,64px);line-height:1;font-weight:700;letter-spacing:-.035em;white-space:nowrap}
.xp-rule{flex:1 1 auto;min-width:24px;height:1px;background:var(--line2)}
.xp-total{white-space:nowrap;font-size:14px;line-height:20px;color:var(--ink2)}
.xp-total b{font-weight:600;color:var(--ink)}
.xp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(28px,4vh,44px)}
.xp-line{display:flex;align-items:center;gap:12px;min-width:0}
.xp-logo{flex:none;width:28px;height:28px;border-radius:8px}
.xp-co{font-size:clamp(18px,1.6vw,24px);line-height:1.2;font-weight:600;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.xp-dot{color:#005BFF;font-weight:700}
.xp-role{font-size:clamp(17px,1.5vw,22px);line-height:1.2;font-weight:500;color:var(--ink2);white-space:nowrap}
.xp-line .xnow{flex:none}
.xp-y{flex:none;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.xp-d{margin-top:8px;padding-left:40px;font-size:15px;line-height:22px;color:var(--ink2)}
@media (max-width: 900px){
.xp-line{flex-wrap:wrap;row-gap:6px}
.xp-line>.xp-rule{display:none}
.xp-role{white-space:normal}
.xp-y{flex-basis:100%;padding-left:40px;color:var(--ink2)}
.xp-head .xp-total{display:none}
}
/* Neutralise old prototype rules that share the .xp names. */
section.xp{display:block;gap:0}
.xp .xp-head{padding-bottom:0;border-bottom:0}
@media (max-width: 900px){
.xp-dot{display:none}
.xp-role{flex-basis:100%;padding-left:40px}
.xp-line .xnow{margin-left:40px}
}
@media (max-width: 400px){.site-head .sh-nav .sh-i{font-size:13px;letter-spacing:-.01em}}
/* Hero statement centered. */
.hero .hero-big h1.hs-text{text-align:center !important;text-wrap:balance}

/* ===== Desktop: draggable windows instead of the badge ===== */
.desk{--win:#17171A;--win-bar:#1F1F23;--win-line:rgba(255,255,255,.1);position:relative;width:100%;max-width:var(--maxw);height:clamp(320px,42vh,440px);margin:0 auto;user-select:none;-webkit-user-select:none}
.t-light .desk{--win:#FFFFFF;--win-bar:#F3F3F5;--win-line:rgba(0,0,0,.12)}
.dw{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px)) rotate(var(--r,0deg));border:1px solid var(--win-line);border-radius:14px;background:var(--win);color:var(--ink);overflow:hidden;transition:box-shadow .2s,transform .35s cubic-bezier(.22,1,.36,1)}
.dw.drag{transition:box-shadow .2s;box-shadow:0 12px 32px -16px rgba(0,0,0,.45);cursor:grabbing}
.dw-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--win-bar);border-bottom:1px solid var(--win-line);cursor:grab;touch-action:none;font-size:12px;line-height:16px;font-weight:500;color:var(--ink2);white-space:nowrap}
.dw-bar i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--win-line)}
.dw-bar span{margin-left:6px;overflow:hidden;text-overflow:ellipsis}
.dw-body img{display:block;width:100%;aspect-ratio:1;object-fit:cover;pointer-events:none}
/* Figma-like canvas */
.dw .fig{display:flex;height:clamp(170px,22vh,230px);background:#1E1E1E}
.fig-tools{display:flex;flex-direction:column;gap:8px;width:30px;padding:10px 0;align-items:center;border-right:1px solid rgba(255,255,255,.08);background:#2C2C2C}
.fig-tools b{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.22)}
.fig-tools b:first-child{background:#005BFF}
.fig-canvas{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:16px;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:14px 14px}
.fig-frame{position:relative;display:flex;flex-direction:column;gap:6px;width:31%;aspect-ratio:9/17;padding:8px;box-sizing:border-box;border-radius:8px;background:#F7F8FA;outline:1px solid #005BFF;outline-offset:3px}
.fig-frame.alt{outline:0}
.fig-frame span{display:block;border-radius:3px;background:#E3E5E8}
.ff-top{height:6px;width:40%;background:#FDC300 !important}
.ff-h{height:10px;width:80%;background:#232323 !important}
.ff-h.s{width:60%}
.ff-card{height:22%;}
.ff-row{display:flex !important;gap:6px;background:none !important;height:14%}
.ff-row i{flex:1;border-radius:3px;background:#E3E5E8}
.ff-list{display:flex !important;flex-direction:column;gap:5px;background:none !important;flex:1}
.ff-list i{height:14px;border-radius:3px;background:#E3E5E8}
.ff-btn{margin-top:auto;height:12px;background:#232323 !important;border-radius:4px !important}
.fig-cursor{position:absolute;left:58%;top:62%;display:flex;align-items:flex-start;gap:2px;animation:fig-cur 6s ease-in-out infinite}
.fig-cursor em{margin-top:10px;padding:2px 6px;border-radius:4px;background:#005BFF;color:#FFFFFF;font-style:normal;font-size:10px;line-height:14px;font-weight:600}
@keyframes fig-cur{0%,100%{transform:translate(0,0)}35%{transform:translate(-46px,-28px)}70%{transform:translate(18px,-46px)}}
/* Note */
.dw .note{padding:14px 16px 16px;font-size:14px;line-height:20px}
.dw .note b{display:block;margin-bottom:8px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.dw .note ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.dw .note li{position:relative;padding-left:22px}
.dw .note li::before{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;border:1.5px solid var(--ink2);border-radius:4px}
.dw .note li:first-child::before{border-color:#005BFF;background:#005BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* Status chip */
.dw-status{border-radius:999px}
.dw .st{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 14px;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;cursor:grab;touch-action:none}
.st-dot{width:8px;height:8px;border-radius:50%;background:#30D158;box-shadow:0 0 0 0 rgba(48,209,88,.5);animation:st-pulse 2s ease-out infinite}
@keyframes st-pulse{70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.dw-fig{--r:0deg;z-index:2}.dw-photo{--r:-3deg;z-index:3}.dw-note{--r:2.5deg;z-index:1}.dw-status{z-index:4}
@media (prefers-reduced-motion: reduce){.fig-cursor,.st-dot{animation:none}.dw{transition:none}}
@media (max-width: 900px){
.desk{height:360px}
.dw-fig{--x:50% !important;--y:0% !important}
.dw-photo{--x:22% !important;--y:30% !important}
.dw-note{--x:76% !important;--y:44% !important}
.dw-status{--x:32% !important;--y:90% !important}
.dw .fig{height:150px}
}

/* ===== Swiss poster: the whole first screen ===== */
.poster{--pl:var(--ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);width:100%;max-width:var(--maxw);height:calc(100svh - 120px);min-height:460px;max-height:900px;margin:0 auto;border:1px solid var(--pl);background:var(--bg);color:var(--ink)}
.ps-ph{position:relative;margin:0;min-height:0;border-right:1px solid var(--pl);overflow:hidden}
.ps-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ps-ph::after{content:"";position:absolute;right:0;bottom:0;width:22%;aspect-ratio:1;background:#005BFF}
.ps-r{display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.ps-top,.ps-bot{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;font-variant-numeric:tabular-nums}
.ps-top{border-bottom:1px solid var(--pl)}.ps-bot{border-top:1px solid var(--pl)}
.ps-big{display:flex;flex-direction:column;justify-content:flex-end;padding:20px;font-size:clamp(56px,10.5vw,184px);line-height:.86;font-weight:800;letter-spacing:-.06em;text-transform:uppercase;overflow:hidden}
.ps-big em{font-style:normal;color:#FDC300}
@media (max-width: 900px){
.poster{grid-template-columns:1fr;height:auto;max-height:none;min-height:0}
.ps-ph{border-right:0;border-bottom:1px solid var(--pl);aspect-ratio:1}
.ps-big{font-size:clamp(44px,15vw,92px);padding:16px}
.ps-top,.ps-bot{padding:12px 16px}
}
/* The words always fit their column: size from the column width. */
.ps-r{container-type:inline-size}
.ps-big{font-size:19cqi !important}

/* First screen = poster + statement + buttons. The poster spans the full screen width and takes whatever height is left. */
@media (min-width: 901px){
.hero{height:100vh;height:100svh;min-height:620px !important;padding-top:84px !important;padding-bottom:24px !important;gap:24px !important;justify-content:flex-start !important}
.hero>.hero-in{flex:1 1 0;min-height:220px;gap:0 !important}
.hero .poster{width:100vw;max-width:none;height:100%;min-height:0;max-height:none;position:relative;left:50%;transform:translateX(-50%);border-left:0;border-right:0}
.hero .hero-big{gap:20px !important}
.hero .hero-big h1.hs-text{font-size:clamp(24px,min(3.6vw,4.4vh),64px) !important}
.ps-big{font-size:min(17cqi,25cqb) !important}
.ps-r{container-type:size}
}
@media (max-width: 900px){
.hero .poster{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.hero .ps-ph{aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--pl)}
.hero .ps-top span:last-child,.hero .ps-bot span:last-child{display:none}
.hero .ps-big{padding:12px}
}
@media (min-width: 901px){.hero .hero-big{--t-display-size:clamp(24px,min(3vw,4.2vh),56px)}}
@media (max-width: 900px){
.hero .hero-big{--t-display-size:clamp(22px,6.6vw,30px);gap:16px !important}
.hero-big .hs-btns .fill{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.hero{padding-top:72px !important;gap:16px !important}
}
@media (max-width: 900px){
.hero{height:100vh;height:100svh;min-height:560px !important;justify-content:flex-start !important;padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important}
.hero>.hero-in{flex:1 1 0;min-height:170px;gap:0 !important}
.hero .poster{width:100vw;max-width:none;height:100%;position:relative;left:50%;transform:translateX(-50%);border-left:0;border-right:0}
.hero .ps-r{container-type:size}
.hero .ps-big{font-size:min(17cqi,26cqb) !important}
}

/* ===== Minimal hero: photo + statement + Get in touch on a soft drifting glow ===== */
.hero{height:auto !important;min-height:100vh !important;min-height:100svh !important;justify-content:center !important;padding-top:96px !important;padding-bottom:48px !important;isolation:isolate}
.hero>.hero-in.hero-min{position:relative;z-index:1;flex:0 0 auto;min-height:0;display:flex !important;flex-direction:column;align-items:center;gap:clamp(28px,4.5vh,48px) !important;max-width:var(--maxw);width:100%;margin:0 auto}
.hm-win{margin:0;width:clamp(150px,13vw,210px);border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden;transform:rotate(-3deg)}
.hm-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-bottom:1px solid var(--line);font-size:12px;line-height:1;font-weight:500;color:var(--ink2,#8A8A8A);white-space:nowrap}
.hm-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.hm-bar span{margin-left:6px}
.hm-win img{display:block;width:100%;aspect-ratio:1;object-fit:cover;-webkit-user-drag:none;user-select:none}
.hero-min .hero-big{--t-display-size:clamp(28px,3.3vw,60px);gap:clamp(24px,4vh,40px) !important;align-items:center !important;width:100%}
.hero-min .hero-big h1.hs-text{max-width:1180px !important;margin:0 auto !important}
.hero-min .hs-btns{display:flex;justify-content:center;width:auto}
.hero-min .hs-btns .btn.git{min-width:220px;padding:0 28px;justify-content:center;border-radius:999px}
.glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow::before,.glow::after,.glow .blob{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.glow::before{width:760px;height:760px;left:50%;margin-left:-380px;top:-420px;background:radial-gradient(circle,rgba(253,195,0,.42),rgba(253,195,0,0) 65%);animation:hm-a 18s ease-in-out infinite}
.glow::after{width:560px;height:560px;left:50%;margin-left:-280px;bottom:-320px;background:radial-gradient(circle,rgba(0,91,255,.22),transparent 70%);animation:hm-b 22s ease-in-out infinite}
.glow .blob{width:480px;height:480px;right:6%;bottom:-140px;background:radial-gradient(circle,rgba(255,150,40,.24),transparent 65%);animation:hm-c 26s ease-in-out infinite}
#root.t-light .glow::before,#root.t-light .glow::after,#root.t-light .glow .blob{opacity:.55}
.hero .grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;background-position:center top;-webkit-mask-image:radial-gradient(70% 60% at 50% 22%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 22%,#000 20%,transparent 75%)}
#root.t-light .hero .grid-bg{opacity:.35}
@keyframes hm-a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-120px,70px) scale(1.12)}66%{transform:translate(90px,40px) scale(.94)}}
@keyframes hm-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(160px,-60px) scale(1.15)}}
@keyframes hm-c{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-140px,-80px) scale(1.1)}75%{transform:translate(60px,-30px) scale(.9)}}
@media (prefers-reduced-motion: reduce){.glow::before,.glow::after,.glow .blob{animation:none}}
@media (max-width: 900px){
.hero{padding-top:88px !important;padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important}
.hm-win{width:clamp(130px,38vw,170px)}
.hero-min .hero-big{--t-display-size:clamp(24px,7vw,34px)}
.glow::before{width:520px;height:520px;margin-left:-260px;top:-300px}
.glow::after{width:380px;height:380px;margin-left:-190px;bottom:-220px}
.glow .blob{width:300px;height:300px}
.hero .grid-bg{background-size:48px 48px}
}

/* ===== Settings: one button in the mobile tab bar opens a sheet with theme and language ===== */
.sh-set{display:none}
@media (max-width: 720px){
.site-head .seg{display:none !important}
.sh-set{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;pointer-events:auto;transition:background .15s}
.sh-set:active{background:rgba(127,127,127,.18)}
.sh-set:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
}
.cm-st .ct-h{margin-bottom:20px}
.st-g{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.st-l{font-size:13px;line-height:18px;font-weight:500;color:#A3A3A3}
.st-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.st-opt{display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:56px;padding:8px 16px 8px 8px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:#1F1F23;color:#FFFFFF;font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.st-opt:hover{background:#26262B;border-color:rgba(255,255,255,.14)}
.st-opt[aria-pressed="true"],.st-opt[aria-pressed="true"]:hover{background:#FFFFFF;border-color:#FFFFFF;color:#121212}
.st-opt:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.st-ic{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06)}
.st-opt[aria-pressed="true"] .st-ic{background:rgba(0,0,0,.06)}
.st-ic .flag{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
@media (prefers-reduced-motion: reduce){.st-opt{transition:none}}
.hero-min .hero-big .hs-btns{display:flex !important;justify-content:center !important;align-self:center !important;width:auto !important;grid-area:auto !important}
@media (max-width: 720px){.site-head .sh-nav{min-width:0}.site-head .sh-nav .sh-i{flex:1 1 0;overflow:hidden;text-overflow:ellipsis}.sh-right>div:last-child{flex:none}}
@media (max-width: 360px){.site-head .sh-nav .sh-i{font-size:12px;letter-spacing:-.02em}}

/* ===== Hero world map: dotted land, a few twinkling lights ===== */
.hero .world{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(75% 70% at 50% 50%,#000 35%,transparent 85%);mask-image:radial-gradient(75% 70% at 50% 50%,#000 35%,transparent 85%)}
.world-in{position:absolute;left:50%;top:52%;width:min(94vw,1560px,232vh);aspect-ratio:160/60;transform:translate(-50%,-50%)}
.world-in::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:.26;-webkit-mask:url("assets/world-line.svg") center/100% 100% no-repeat;mask:url("assets/world-line.svg") center/100% 100% no-repeat}
#root.t-light .world-in::before{opacity:.3}
.wl{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;opacity:0;animation:wl-tw 4.5s ease-in-out infinite;--c:#FDC300}
.wl-b{--c:#4D8BFF}
.wl-w{--c:var(--ink)}
.wl{background:var(--c);box-shadow:0 0 6px 1px var(--c),0 0 18px 4px color-mix(in srgb,var(--c) 45%,transparent)}
@keyframes wl-tw{0%,100%{opacity:0;transform:scale(.4)}45%,55%{opacity:1;transform:scale(1)}}
#root.t-light .wl-y{--c:#F0A500}
#root.t-light .wl-b{--c:#005BFF}
@media (prefers-reduced-motion: reduce){.wl{animation:none;opacity:.8}}
@media (max-width: 900px){.world-in{width:190vw;top:46%}.hero .world{-webkit-mask-image:radial-gradient(90% 60% at 50% 45%,#000 30%,transparent 85%);mask-image:radial-gradient(90% 60% at 50% 45%,#000 30%,transparent 85%)}}
/* Lemana logo: transparent mark on its own tile, white in dark theme, soft grey with a hairline in light */
.xp-logo-lp{box-sizing:border-box;padding:0;background:#FFFFFF;object-fit:contain}
#root.t-light .xp-logo-lp{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
/* Blue only: background glow and map lights */
.glow::before{background:radial-gradient(circle,rgba(0,91,255,.42),rgba(0,91,255,0) 65%)}
.glow::after{background:radial-gradient(circle,rgba(77,139,255,.22),transparent 70%)}
.glow .blob{background:radial-gradient(circle,rgba(40,110,255,.26),transparent 65%)}
/* "Currently here" badge in the site blue */
.xnow{background:rgba(0,91,255,.16);color:#5B95FF}
.xnow::before{background:#3D7BFF}
#root.t-light .xnow{background:rgba(0,91,255,.1);color:#005BFF}
#root.t-light .xnow::before{background:#005BFF}

/* The blue glow lives behind the whole site, not only the first screen */
.site-glow{position:fixed !important;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#root>main,#root>.hero{position:relative;z-index:1}
#root .hero{background:transparent !important}
#root #top{background:transparent !important;box-shadow:none !important}
/* Primary buttons in the site blue */
.btn.git,.fill .btn.git{border-color:#005BFF;background:#005BFF;color:#FFFFFF}
.btn.git:hover,.fill .btn.git:hover{border-color:#1F6DFF;background:#1F6DFF;color:#FFFFFF}
.btn.git:active,.fill .btn.git:active{border-color:#004BD6;background:#004BD6;color:#FFFFFF}
/* Same glow in the light theme as in the dark one */
#root.t-light .glow::before,#root.t-light .glow::after,#root.t-light .glow .blob{opacity:1}

/* Wide monitors (1921px+): the 1920 layout scales with the screen instead of sitting in a fixed 1520px column */
@media (min-width: 1921px){
:root{--gutter:10.4vw;--maxw:100vw;
--t-display-size:3.96vw;--t-h1-size:3.333vw;--t-h2-size:3.333vw;--t-h3-size:1.667vw;--t-h4-size:1.25vw;--t-lead-size:1.146vw;
--t-body-size:.78vw;--t-body-lh:1.47;--t-body-s-size:.677vw;--t-body-s-lh:1.46;--t-caption-size:.73vw;--t-caption-lh:1.43;--t-label-size:.573vw;--t-label-lh:1.45}
.hero-min .hero-big{--t-display-size:3.125vw}
.hero-min .hero-big h1.hs-text{max-width:61.5vw !important}
.hm-win{width:10.9vw}
.hm-bar{height:1.46vw;font-size:.625vw;padding:0 .625vw}
.hm-bar i{width:.47vw;height:.47vw}
.hero-min .hs-btns .btn.git{min-width:11.5vw;min-height:2.6vw;font-size:.78vw !important}
.tv-lbl{font-size:.57vw;line-height:.83vw;padding:.1vw .42vw}
}
@media (min-width: 1921px){.sh-nav,.site-head .clocks,.sh-right>div:last-child,.up-fab{zoom:1.15}}
@media (min-width: 2300px){.sh-nav,.site-head .clocks,.sh-right>div:last-child,.up-fab{zoom:1.3}}
@media (min-width: 2800px){.sh-nav,.site-head .clocks,.sh-right>div:last-child,.up-fab{zoom:1.6}}

/* Desktop: visited capitals, a faint dot each, blinking in turn */
.cap{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#4D8BFF;opacity:0;animation:cap-blink 100s linear infinite both}
#root.t-light .cap{background:#005BFF}
@keyframes cap-blink{0%{opacity:0;transform:scale(.6);box-shadow:none}1.6%{opacity:1;transform:scale(1.4);box-shadow:0 0 6px 1px #4D8BFF,0 0 16px 4px rgba(77,139,255,.45)}3.6%{opacity:1;transform:scale(1.2)}6%{opacity:0;transform:scale(.6);box-shadow:none}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.cap{animation:none;opacity:.5}}
@media (min-width: 1921px){.world-in{width:min(94vw,232vh)}.cap{width:.21vw;height:.21vw;margin:-.105vw 0 0 -.105vw}}
.hm-win img{image-rendering:auto;transform:translateZ(0)}
/* Second hue next to the blue: a deep violet blob drifting on the left */
.glow .blob2{right:auto;left:4%;top:28%;bottom:auto;width:560px;height:560px;background:radial-gradient(circle,rgba(98,54,255,.34),transparent 65%);animation:hm-d 30s ease-in-out infinite}
@keyframes hm-d{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(140px,90px) scale(1.12)}70%{transform:translate(-60px,-50px) scale(.92)}}
@media (max-width: 900px){.glow .blob2{width:320px;height:320px;left:-20%}}
@media (prefers-reduced-motion: reduce){.glow .blob2{animation:none}}
/* Glow drifts 2.25× faster than the original */
.glow::before{animation-duration:8s}
.glow::after{animation-duration:9.8s}
.glow .blob{animation-duration:11.5s}
.glow .blob2{animation-duration:13.3s}
/* Light theme: stronger glow so it reads on white as well as on black */
#root.t-light .glow::before{background:radial-gradient(circle,rgba(0,91,255,.62),rgba(0,91,255,0) 65%)}
#root.t-light .glow::after{background:radial-gradient(circle,rgba(0,91,255,.4),transparent 70%)}
#root.t-light .glow .blob{background:radial-gradient(circle,rgba(30,100,255,.45),transparent 65%)}
#root.t-light .glow .blob2{background:radial-gradient(circle,rgba(98,54,255,.48),transparent 65%)}
/* Spotify: favourite tracks, desktop header only */
.sh-spot{display:flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:52px;height:52px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#17171A;cursor:pointer;pointer-events:auto;transition:background .15s,transform .15s}
.sh-spot:hover{background:#26262B}
.sh-spot:active{transform:scale(.96)}
.sh-spot:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (max-width: 720px){.sh-spot{display:none}}

/* ===== Floating contacts bar: Telegram / CV / Email, always on screen, hidden while a modal is open ===== */
.fbar{position:fixed;left:50%;bottom:clamp(160px,20vh,200px);z-index:35;display:flex;align-items:center;gap:2px;box-sizing:border-box;height:56px;padding:6px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(23,23,26,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);transform:translateX(-50%);font-family:var(--font);transition:opacity .25s,transform .25s}
.fbar a,.fbar button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:#FFFFFF;font:inherit;font-size:15px;line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s}
.fbar a:hover,.fbar button:hover{background:rgba(255,255,255,.1)}
.fbar a:active,.fbar button:active{background:rgba(255,255,255,.16)}
.fbar a:focus-visible,.fbar button:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
.fbar i{flex:none;width:1px;height:20px;background:rgba(255,255,255,.14)}
html.cm-lock .fbar,html.embed .fbar{opacity:0;pointer-events:none;transform:translate(-50%,16px)}
@media (max-width: 720px){
.fbar{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 72px);height:48px;padding:4px}
.fbar a,.fbar button{height:40px;padding:0 16px;font-size:14px}
}
@media (min-width: 1921px){.fbar{zoom:1.3}}
@media (min-width: 2800px){.fbar{zoom:1.6}}
@media (prefers-reduced-motion: reduce){.fbar{transition:none}}

/* ===== About page ===== */
.ab{position:relative;z-index:1;box-sizing:border-box;max-width:var(--maxw);margin:0 auto;padding:clamp(120px,16vh,180px) 0 clamp(260px,30vh,320px);display:flex;flex-direction:column;gap:clamp(64px,9vw,120px)}
#root>.ab{padding-left:var(--gutter);padding-right:var(--gutter);max-width:calc(var(--maxw) + 2 * var(--gutter))}
.ab-intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.ab-ph{width:clamp(180px,16vw,260px);transform:rotate(-3deg);margin:8px 0 0}
.ab-txt{display:flex;flex-direction:column;gap:16px;max-width:820px}
.ab-name{margin:0}
.ab-role{margin:0;color:var(--ink2)}
.ab-p{margin:8px 0 0;font-size:clamp(18px,1.4vw,22px);line-height:1.5;color:var(--ink)}
.ab-sec .sec-head{margin-bottom:clamp(20px,3vw,36px)}
.ab-sec .sec-head h2{margin:0}
.ab-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.ab-list li{position:relative;padding:20px 0 20px 28px;border-top:1px solid var(--line);font-size:clamp(16px,1.2vw,19px);line-height:1.5}
.ab-list li::before{content:"";position:absolute;left:0;top:29px;width:8px;height:8px;border-radius:50%;background:#005BFF;box-shadow:0 0 10px rgba(0,91,255,.6)}
@media (max-width: 900px){.ab-intro{grid-template-columns:1fr;justify-items:start}.ab-ph{width:min(200px,50vw)}.ab-list{grid-template-columns:1fr}}
@media (min-width: 1921px){.ab-p{font-size:1.15vw}.ab-list li{font-size:.99vw}.ab-ph{width:13.5vw}.ab-txt{max-width:43vw}}
/* Keep the first screen's content clear of the floating bar */
@media (min-width: 721px){.hero-min .hm-win{width:clamp(120px,min(13vw,19vh),210px)}.hero-min .hero-big{--t-display-size:clamp(26px,min(3.3vw,5.4vh),60px)}}
/* Floating bar v2: 100px from the bottom, buttons with icons (Telegram is the primary one) */
.fbar{gap:6px;height:auto;padding:6px;border-color:rgba(255,255,255,.1);background:rgba(14,14,16,.6)}
.fbar i{display:none}
.fbar a,.fbar button{gap:10px;height:48px;padding:0 20px;border:1px solid rgba(255,255,255,.1);background:#17171A}
.fbar a:hover,.fbar button:hover{background:#26262B;border-color:rgba(255,255,255,.2)}
.fbar .fb-pri{border-color:#005BFF;background:#005BFF}
.fbar .fb-pri:hover{border-color:#1F6DFF;background:#1F6DFF}
.fbar svg{flex:none}
@media (max-width: 720px){.fbar{gap:4px;padding:4px}.fbar a,.fbar button{height:40px;padding:0 14px;gap:8px}.fbar svg{width:18px;height:18px}}
/* University monogram in place of a logo */
.edu-logo{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:#E8F1F8;color:#2A6FA8;font-size:7px;line-height:1;font-weight:800;letter-spacing:.02em}
@media (max-width: 720px){#education .xp-co{white-space:normal;min-width:0;flex:1 1 0}}
.xp-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;transition:color .2s}
.xp-link .xp-ext{flex:none;opacity:.4;transition:opacity .2s,transform .2s}
.xp-link:hover{color:#4D8DFF}
.xp-link:hover .xp-ext{opacity:1;transform:translate(2px,-2px)}
.xp-link:focus-visible{outline:2px solid #005BFF;outline-offset:3px;border-radius:4px}
.off-ic{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:rgba(0,91,255,.16);color:#4D8DFF}
.off-ic svg{width:62%;height:62%}
.t-light .off-ic{background:rgba(0,91,255,.1);color:#005BFF}
@media (min-width: 721px){.fbar{bottom:40px}}
.fbar.fb-off{opacity:0;pointer-events:none;transform:translate(-50%,16px)}
/* Outside of work: hover fan of cards */
.off .xp-row{position:relative}
.off-fan{display:none}
@media (hover: hover) and (pointer: fine) and (min-width: 721px){
.off-fan{display:block;position:absolute;left:var(--fx,60%);top:50%;z-index:20;width:0;height:0;pointer-events:none}
.off-fan img{position:absolute;left:-80px;top:-100px;width:160px;height:200px;border-radius:14px;opacity:0;transform:translate(0,24px) rotate(0) scale(.85);transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.off .xp-row:hover .off-fan img{opacity:1}
.off .xp-row:hover .off-fan img:nth-child(1){transform:translate(-120px,10px) rotate(-12deg)}
.off .xp-row:hover .off-fan img:nth-child(2){transform:translate(0,-12px) rotate(0);z-index:2}
.off .xp-row:hover .off-fan img:nth-child(3){transform:translate(120px,10px) rotate(12deg)}
.off .xp-row:hover .off-fan img:nth-child(1){transition-delay:.03s}
.off .xp-row:hover .off-fan img:nth-child(3){transition-delay:.06s}
}
@media (prefers-reduced-motion: reduce){.off-fan img{transition:opacity .2s !important}}
.gh-tok{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.gh-tok::before{content:"";order:-2;width:4px;height:4px;margin-right:2px;border-radius:50%;background:#005BFF}
.gh-tok::after{content:"";order:-1;width:12px;height:12px;background:#D97757;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 1.5l1.9 7.1 6.6-3.6-3.6 6.6 7.1 1.9-7.1 1.9 3.6 6.6-6.6-3.6L12 22.5l-1.9-7.1-6.6 3.6 3.6-6.6L0 12.4l7.1-1.9-3.6-6.6 6.6 3.6z%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 1.5l1.9 7.1 6.6-3.6-3.6 6.6 7.1 1.9-7.1 1.9 3.6 6.6-6.6-3.6L12 22.5l-1.9-7.1-6.6 3.6 3.6-6.6L0 12.4l7.1-1.9-3.6-6.6 6.6 3.6z%27/%3E%3C/svg%3E") center/contain no-repeat}
.gh [data-gh]{display:inline-flex;align-items:center;white-space:nowrap}
.gh-tok{line-height:1}
@media (max-width: 1599px) and (min-width: 721px){.site-head .gh .gh-tok{display:none}}
.toast.warn .toast-ic{background:#FFC531;color:#1A1A1A}
@media (min-width: 721px){.toast{bottom:120px}}
@media (max-width: 720px){.toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 132px)}}
/* ===== Cases list (numbered rows + moving screen strip) ===== */
.cs-list{display:flex;flex-direction:column}
.cs{border-bottom:1px solid var(--line)}
.cs-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,56px);align-items:center;padding:clamp(28px,3.4vw,56px) 0;color:var(--ink);text-decoration:none}
.cs-txt{display:flex;flex-direction:column;gap:18px;min-width:0}
.cs-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;font-size:13px;line-height:18px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.cs-n{color:var(--ink);transition:color .3s}
.cs-tags{display:flex;flex-wrap:wrap;gap:4px 10px}
.cs-y{margin-left:auto}
.cs-co{display:flex;align-items:center;gap:10px;font-size:15px;line-height:20px;font-weight:600;color:var(--ink2)}
.cs-logo{width:28px;height:28px;border-radius:8px;flex:none}
.cs-t{margin:0;font-size:clamp(26px,2.6vw,44px);line-height:1.08;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.cs-mask{display:block;overflow:hidden;padding-bottom:.08em}
.cs-mask>span{display:block;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.cs-m{display:flex;flex-wrap:wrap;gap:8px 24px}
.cs-m .met{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:20px;color:var(--ink2)}
.cs-m .met b{font-size:22px;line-height:1;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.cs-open{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:15px;font-weight:600;color:var(--ink)}
.cs-open i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.cs-gal{position:relative;height:clamp(300px,30vw,440px);overflow:hidden;border-radius:24px;background:var(--surface);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cs-track{position:absolute;left:0;top:50%;display:flex;gap:20px;padding:0 20px;will-change:transform;transform:translate3d(var(--gx,0px),-50%,0);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.cs .cs-gal .ph,.cs .cs-gal .ph.side,.cs .cs-gal .ph.mid{display:flex;flex:none;width:clamp(150px,13vw,210px);height:auto;aspect-ratio:300/650;margin:0;zoom:1;opacity:1;transform:none;border-width:6px;border-radius:30px;padding:10px;gap:8px;font-size:10px}
.cs .cs-gal .ph.vid{padding:0}
.cs .cs-gal .ph.vid video{border-radius:24px}
/* hover */
.cs-in:hover .cs-n{color:#005BFF}
.cs-in:hover .cs-open i{transform:translateX(8px)}
.cs-in:hover .cs-mask>span{transform:translateX(10px)}
.cs-in:focus-visible{outline:2px solid #005BFF;outline-offset:6px;border-radius:12px}
/* reveal on scroll */
.cs.pre .cs-mask>span{transform:translateY(105%)}
.cs.pre .cs-top,.cs.pre .cs-co,.cs.pre .cs-m,.cs.pre .cs-open{opacity:0;transform:translateY(16px)}
.cs-top,.cs-co,.cs-m,.cs-open{transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.cs-co{transition-delay:.05s}.cs-m{transition-delay:.15s}.cs-open{transition-delay:.22s}
.cs.pre .cs-gal{clip-path:inset(0 0 0 100% round 24px)}
.cs-gal{clip-path:inset(0 0 0 0 round 24px);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1) .1s}
@media (max-width: 900px){
.cs-in{grid-template-columns:1fr;gap:24px}
.cs-gal{height:340px}
.cs .cs-gal .ph,.cs .cs-gal .ph.side,.cs .cs-gal .ph.mid{width:140px}
}
@media (prefers-reduced-motion: reduce){.cs-track,.cs-mask>span,.cs-gal,.cs-top,.cs-co,.cs-m,.cs-open{transition:none !important}.cs.pre .cs-mask>span,.cs.pre .cs-top,.cs.pre .cs-co,.cs.pre .cs-m,.cs.pre .cs-open{transform:none;opacity:1}.cs.pre .cs-gal{clip-path:none}}
.bento>.cs-list{grid-column:1/-1}
.cs-m .met{padding:0;border-radius:0;background:none;box-shadow:none}
.cs-m .met{font-size:14px;line-height:20px;color:var(--ink2)}
.cs-m .met b{font-size:22px;line-height:1;color:var(--ink)}
.cs-track{top:0;bottom:0;align-items:center;transform:translate3d(var(--gx,0px),0,0)}
.cs .cs-gal .ph,.cs .cs-gal .ph.side,.cs .cs-gal .ph.mid{height:calc(100% - 56px);width:auto}
/* Case page is a normal page now: the contents list sits in its own column and sticks while reading. */
@media (min-width: 1024px){
main:has(.toc){padding-left:var(--gutter) !important}
.toc{position:sticky !important;left:auto !important;top:100px !important;flex:0 0 220px !important;width:220px;max-height:calc(100vh - 124px)}
}
.case-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.case-tags .chip{min-height:30px;padding:0 12px;border-radius:999px;font-size:13px}
.case-tags .case-fig{margin-left:auto;color:var(--mute)}
/* Performance: capitals blink one by one (JS adds .on), only opacity/transform animate. */
.cap{animation:none !important;opacity:0}
.cap::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(77,139,255,.55),rgba(77,139,255,0) 70%)}
.cap.on{animation:cap-on 6s linear both !important}
@keyframes cap-on{0%{opacity:0;transform:scale(.6)}27%{opacity:1;transform:scale(1.4)}60%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.6)}}
@media (prefers-reduced-motion: reduce){.cap{opacity:.5}}
/* Performance: glow blobs are soft gradients already — no live blur filter, just a moving layer. */
.glow::before,.glow::after,.glow .blob{filter:none !important;will-change:transform}
.glow::before{width:1060px;height:1060px;margin-left:-530px;top:-570px}
.glow::after{width:800px;height:800px;margin-left:-400px;bottom:-440px}
.glow .blob{width:700px;height:700px}
.glow .blob2{width:780px;height:780px}
@media (max-width: 900px){.glow::before{width:720px;height:720px;margin-left:-360px;top:-400px}.glow::after{width:540px;height:540px;margin-left:-270px;bottom:-310px}.glow .blob{width:440px;height:440px}.glow .blob2{width:460px;height:460px}}
.fw{color:var(--ink);opacity:.22;transition:opacity .35s ease}
.fw.on{opacity:1}
.xp-d .fw{color:inherit}

/* 3D tilt + scroll parallax on the phone mockups in the cases list */
.cs-gal{perspective:1100px}
.cs .cs-gal .ph,.cs .cs-gal .ph.side,.cs .cs-gal .ph.mid{transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateY(var(--py,0px));transition:transform .25s linear}
@media (prefers-reduced-motion: reduce){.cs .cs-gal .ph,.cs .cs-gal .ph.side,.cs .cs-gal .ph.mid{transform:none}}

/* ===== Cases: Revolut-style intro. The DBS cover fills the screen, then shrinks into the first card of the site grid
   while the next cases slide into the same row. Below it the rest of the cases continue in the same 3-column grid. ===== */
#work{--ch:min(76svh,700px);--cgap:24px}
.bento>.rv,.bento>.rv-more{grid-column:1/-1}
.rv{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:calc(100vh + 100vh);height:calc(100svh + 100svh)}
.rv-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--oy:0px}
.rv-row{position:absolute;left:50%;top:50%;width:min(var(--maxw),calc(100vw - 2 * var(--gutter)));height:var(--ch);transform:translate(-50%,calc(-50% - var(--oy)));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cgap)}
.rv-card{position:relative;display:block;min-width:0;border-radius:28px;overflow:hidden;color:#FFFFFF;text-decoration:none;isolation:isolate}
.rv-main{position:absolute;inset:0;z-index:2;border-radius:0;clip-path:inset(var(--it,0px) var(--ir,0px) var(--ib,0px) var(--il,0px) round var(--rr,0px));will-change:clip-path}
.rv-side{will-change:transform,opacity}
.rv-in{position:absolute;inset:0;display:block}
.rv-main .rv-in{inset:auto;left:var(--x,0px);top:var(--y,0px);width:var(--w,100%);height:var(--h,100%)}
.rv-cov{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;gap:clamp(10px,1.2vw,18px);padding-top:clamp(64px,8vh,92px);box-sizing:border-box;perspective:1000px}
.rv-main .rv-cov{transform:scale(var(--is,1));transform-origin:50% 30%}
.rv-cov .ph{width:clamp(118px,8.6vw,168px);height:auto;aspect-ratio:300/650;border-width:6px;border-radius:28px;padding:10px;gap:8px;font-size:10px;transform:translateY(var(--py,0px)) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotate(var(--rz,0deg));transition:transform .25s linear}
.rv-cov .rv-pa{--rz:-6deg;margin-top:28px}
.rv-cov .rv-pb{--rz:5deg}
.rv-main::before,.rv-card::before{content:"";position:absolute;inset:0;z-index:-1}
.rv-k1::before{background:radial-gradient(110% 80% at 50% 105%,#7E97FF 0%,rgba(126,151,255,0) 60%),linear-gradient(160deg,#2A1A7A,#3A1D9A 45%,#0E1440)}
.rv-k2::before{background:radial-gradient(90% 70% at 20% 100%,rgba(0,91,255,.6),transparent 70%),linear-gradient(170deg,#1A0E45,#3A1D9A)}
.rv-k3::before{background:radial-gradient(90% 70% at 80% 100%,rgba(140,90,255,.55),transparent 70%),linear-gradient(170deg,#0B1636,#123A9A)}
.rv-k4::before{background:radial-gradient(90% 70% at 30% 0%,rgba(110,80,255,.55),transparent 70%),linear-gradient(190deg,#140A33,#24127A 60%,#0A2A7A)}
.rv-k5::before{background:radial-gradient(90% 70% at 70% 0%,rgba(0,91,255,.5),transparent 70%),linear-gradient(200deg,#0E1440,#2A1A7A)}
.rv-top{position:absolute;left:16px;right:16px;top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.rv-lbl{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:13px;line-height:16px;font-weight:600}
.rv-lbl img{width:22px;height:22px;border-radius:7px;object-fit:cover;flex:none}
.rv-lbl .cs-co{display:block;font:inherit;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-y{flex:none;font-size:13px;font-weight:500;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.rv-glass{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.rv-tags{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12px;line-height:16px;color:rgba(255,255,255,.7)}
.rv-tags b{font-weight:600;color:#FFFFFF}
.rv-t{font-size:clamp(18px,1.35vw,24px);line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.rv-glass .cs-m{display:flex;flex-wrap:wrap;gap:6px 18px}
.rv-glass .cs-m .met{display:flex;align-items:baseline;gap:6px;font-size:12px;line-height:16px;color:rgba(255,255,255,.75)}
.rv-glass .cs-m .met b{font-size:20px;line-height:1;font-weight:700;color:#FFFFFF}
.rv-glass .cs-open{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#FFFFFF}
.rv-glass .cs-open i{font-style:normal;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rv-card:hover .cs-open i{transform:translateX(8px)}
.rv-card:focus-visible{outline:2px solid #005BFF;outline-offset:4px}
.rv-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cgap);margin-top:calc((var(--ch) - 100svh) / 2 + var(--cgap))}
.rv-more>*{height:var(--ch);min-height:0}
.rv-more>.more{display:flex;flex-direction:column}
.rv-plain{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rv-plain:hover{transform:translateY(-6px)}
/* without motion (or before JS): a plain grid */
html:not(.rvon) .rv{height:auto;width:auto;margin:0}
html:not(.rvon) .rv-pin{position:relative;height:auto;overflow:visible}
html:not(.rvon) .rv-row{position:relative;left:auto;top:auto;transform:none;width:auto}
html:not(.rvon) .rv-main{position:relative;clip-path:none;border-radius:28px;grid-column:1;grid-row:1;height:var(--ch)}
html:not(.rvon) .rv-main .rv-in{inset:0;width:auto;height:auto}
html:not(.rvon) .rv-more{margin-top:var(--cgap)}
@media (max-width: 900px){
#work{--ch:min(66svh,540px);--cgap:16px}
.rv-pin{--oy:44px}
.rv-row{grid-template-columns:minmax(0,1fr)}
.rv-row .rv-side{display:none}
.rv-more{grid-template-columns:minmax(0,1fr)}
.rv-more .rv-side{display:block}
.rv-more>.more{height:auto;min-height:200px}
}

/* ===== "How this site is made": full-screen commits + Claude tokens block at the bottom of the home page ===== */
.mk{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;box-sizing:border-box;padding:clamp(72px,12vh,140px) 0;margin-top:clamp(48px,8vh,96px);isolation:isolate}
.mk::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;background:radial-gradient(60% 55% at 85% 100%,rgba(0,91,255,.28),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(98,54,255,.22),transparent 70%);border-top:1px solid var(--line)}
#root.t-light .mk::before{background:radial-gradient(60% 55% at 85% 100%,rgba(0,91,255,.14),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(98,54,255,.12),transparent 70%)}
.mk-in{width:100%;max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,7vh,80px)}
.mk-head{display:flex;flex-direction:column;gap:20px;max-width:1100px}
.mk-eye{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:7px 14px 7px 12px;border:1px solid var(--line2);border-radius:999px;font-size:13px;line-height:16px;font-weight:500;color:var(--ink2)}
.mk-dot{width:8px;height:8px;border-radius:50%;background:#005BFF;box-shadow:0 0 0 0 rgba(0,91,255,.6);animation:mk-pulse 2s ease-out infinite}
@keyframes mk-pulse{0%{box-shadow:0 0 0 0 rgba(0,91,255,.55)}100%{box-shadow:0 0 0 10px rgba(0,91,255,0)}}
.mk-h{margin:0;font-size:clamp(34px,4.6vw,84px);line-height:1;font-weight:700;letter-spacing:-.045em;text-wrap:balance}
.mk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2)}
.mk-s{display:flex;flex-direction:column;gap:10px;padding:28px 24px 0 0;min-width:0}
.mk-s+.mk-s{padding-left:24px;border-left:1px solid var(--line2)}
.mk-s b{display:flex;align-items:center;gap:.12em;font-size:clamp(40px,5vw,104px);line-height:.95;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-s>span{font-size:15px;line-height:20px;color:var(--ink2)}
.mk-tok b{background:linear-gradient(100deg,#3D7BFF,#8A5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-cl{width:.5em;height:.5em;flex:none;color:#D97757}
.mk-chart{display:flex;flex-direction:column;gap:12px}
.mk-bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(14px,1.5vw,26px),1fr));gap:clamp(4px,.45vw,8px)}
.mk-bars i{display:block;aspect-ratio:1;border-radius:clamp(3px,.3vw,6px);background:#8A5CFF;opacity:0;transform:scale(.4);transition:opacity .5s ease var(--d),transform .6s cubic-bezier(.22,1,.36,1) var(--d)}
.mk-bars i.now{background:#2F7BFF;box-shadow:0 0 12px rgba(47,123,255,.6)}
.mk.in .mk-bars i{opacity:.5;transform:none}
.mk.in .mk-bars i.now{opacity:1;animation:mk-blink 2.4s ease-in-out calc(var(--d) + 1.2s) infinite}
@keyframes mk-blink{50%{opacity:.55}}
.mk-axis{display:flex;justify-content:space-between;font-size:13px;color:var(--mute,var(--ink2))}
@media (max-width: 900px){
.mk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.mk-s{padding:20px 16px 20px 0}
.mk-s+.mk-s{padding-left:0;border-left:0}
.mk-s:nth-child(even){padding-left:16px;border-left:1px solid var(--line2)}
.mk-s:nth-child(n+3){border-top:1px solid var(--line2)}
.mk{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){.mk-bars i{transform:none;transition:none;opacity:.9;animation:none !important}.mk-dot{animation:none}}
/* NDA card: same card language as the cases, but in the bright accent blue with redacted, blurred screens */
:is(.rv-more,.cv-it)>.more.rv-nda{position:relative;display:block;padding:0;border:0;border-radius:28px;overflow:hidden;color:#FFFFFF;text-decoration:none;isolation:isolate;background:radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.28),transparent 60%),radial-gradient(80% 70% at 100% 100%,rgba(138,92,255,.75),transparent 70%),linear-gradient(165deg,#2F7BFF,#005BFF 45%,#2A1A9A)}
:is(.rv-more,.cv-it)>.more.rv-nda:hover{background:radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.34),transparent 60%),radial-gradient(80% 70% at 100% 100%,rgba(138,92,255,.85),transparent 70%),linear-gradient(165deg,#2F7BFF,#005BFF 45%,#2A1A9A)}
.nda-ghost{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;gap:18px;padding-top:clamp(64px,8vh,92px);filter:blur(5px);opacity:.55;pointer-events:none}
.nda-ghost .ph{width:clamp(118px,8.6vw,168px);aspect-ratio:300/650;height:auto;border:6px solid rgba(255,255,255,.35);border-radius:28px;background:rgba(10,14,60,.45);padding:22px 12px;gap:10px;transform:rotate(-6deg) translateY(28px)}
.nda-ghost .ph+.ph{transform:rotate(5deg)}
.nda-bar{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.7);width:70%}
.nda-bar.s{width:45%;opacity:.6}
.nda-blk{display:block;height:44px;border-radius:12px;background:rgba(255,255,255,.22)}
.nda-blk.t{height:90px}
.nda-lbl{padding:6px 12px 6px 10px;gap:6px;background:rgba(255,255,255,.2)}
.nda-glass{gap:12px;background:rgba(255,255,255,.14)}
.nda-sub{font-size:13px;line-height:18px;color:rgba(255,255,255,.82)}
.nda-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 8px 0 18px;border-radius:999px;background:#FFFFFF;color:#0B1A4A;font-size:14px;font-weight:600}
.nda-cta i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#005BFF;color:#FFFFFF;font-style:normal;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rv-nda:hover .nda-cta i{transform:translateX(4px)}
.rv-nda .rv-y{font-weight:700;color:#FFFFFF}
@media (max-width: 900px){:is(.rv-more,.cv-it)>.more.rv-nda{height:var(--ch)}}
/* More air in the card text panel, bigger metrics */
.rv-glass{left:20px;right:20px;bottom:20px;gap:16px;padding:24px 24px 22px;border-radius:24px}
.rv-tags{font-size:13px;line-height:18px}
.rv-t{font-size:clamp(20px,1.5vw,28px);line-height:1.18}
.rv-glass .cs-m{gap:14px 28px;padding:4px 0}
.rv-glass .cs-m .met{flex-direction:column;align-items:flex-start;gap:6px;font-size:13px;line-height:17px;max-width:16ch}
.rv-glass .cs-m .met b{font-size:clamp(34px,2.9vw,52px);letter-spacing:-.04em}
.rv-glass .cs-open{padding-top:4px;font-size:15px}
.rv-top{left:20px;right:20px;top:20px}
.rv-cov{padding-top:clamp(64px,7vh,84px)}
.rv-cov .ph{width:clamp(104px,7.4vw,150px)}
.nda-glass{gap:16px}
.nda-sub{font-size:14px;line-height:20px}
@media (max-width: 900px){.rv-glass{left:14px;right:14px;bottom:14px;padding:20px;gap:14px}.rv-glass .cs-m .met b{font-size:34px}.rv-cov .ph{width:clamp(96px,26vw,124px)}}
.rv-glass .cs-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}
.rv-glass .cs-m .met{max-width:none;min-width:0}
.rv-glass .cs-m .met>span{overflow-wrap:break-word;hyphens:manual}
/* equal text panels across a row */
.rv-glass{box-sizing:border-box}
.rv-glass .cs-open{margin-top:auto}
/* hover: the card takes the company's brand colour, each case has its own pattern behind the phones */
.rv-card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1)}
.rv-main::after{display:none}
.rv-main .rv-in::before{content:"";position:absolute;inset:0;border-radius:28px;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1)}
.br-lemana::after,.rv-main.br-lemana .rv-in::before{background:radial-gradient(70% 50% at 50% 30%,#FFD84D,transparent 70%),#FDC300}
.br-planfact::after{background:radial-gradient(70% 50% at 50% 20%,rgba(255,255,255,.25),transparent 70%),linear-gradient(165deg,#2DB4CE,#1F97AF 55%,#12708A)}
.br-redis::after{background:radial-gradient(60% 50% at 50% 20%,#2A2A2A,transparent 70%),#0A0A0A}
.rv-card:hover::after,.rv-card:focus-visible::after,.rv-main:hover .rv-in::before{opacity:1}
.br-lemana:hover .rv-glass,.br-lemana:hover .rv-lbl{background:rgba(17,17,17,.84);border-color:rgba(17,17,17,.9)}
.br-lemana:hover .rv-y{color:#111111}
.br-redis:hover .rv-glass{background:rgba(255,255,255,.08)}
.rv-glass,.rv-lbl{transition:background-color .35s,border-color .35s}
.rv-cov .ph{position:relative;z-index:1}
.rv-pat{position:absolute;inset:0;z-index:0;opacity:0;transform:scale(.94);transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.rv-pat svg{display:block;width:100%;height:100%;overflow:visible}
.rv-card:hover .rv-pat,.rv-card:focus-visible .rv-pat{opacity:1;transform:none}
.pt-word{font:700 17px/1 var(--font,Manrope),sans-serif;letter-spacing:.06em}
.pt-spin{animation:pt-spin 24s linear infinite;animation-play-state:paused}
.pt-spin.rev{animation-direction:reverse}
@keyframes pt-spin{to{transform:rotate(360deg)}}
.pt-run{animation:pt-run 14s linear infinite;animation-play-state:paused}
.pt-run.rev{animation-direction:reverse}
@keyframes pt-run{to{transform:translateX(-400px)}}
.pt-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.rv-card:hover .pt-bar{transform:none}
.pt-line{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) .25s}
.rv-card:hover .pt-line{stroke-dashoffset:0}
.pt-dot{animation:pt-dot 1.8s ease-in-out infinite;animation-play-state:paused}
@keyframes pt-dot{0%,100%{transform:scale(.35)}50%{transform:scale(1)}}
.pt-tile{opacity:0;transform:scale(.4) rotate(-30deg);transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.rv-card:hover .pt-tile{opacity:.55;transform:none}
.rv-card:hover .pt-spin,.rv-card:hover .pt-run,.rv-card:hover .pt-dot{animation-play-state:running}
@media (hover: none){.rv-pat{display:none}}
@media (prefers-reduced-motion: reduce){.pt-spin,.pt-run,.pt-dot{animation:none}}
/* nothing may spill outside a card: the main card's content box clips like the others */
.rv-main .rv-in{overflow:hidden;border-radius:28px;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.rv-card,.rv-cov{contain:paint}
.nda-glass .nda-cta{margin-top:auto;justify-content:flex-start;gap:12px;height:auto;min-height:60px;padding:10px 10px 10px 18px;border-radius:18px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nda-cta>svg{flex:none;color:#005BFF}
.nda-ct{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nda-ct b{font-size:15px;line-height:18px;font-weight:700;color:#0B1A4A}
.nda-ct span{font-size:13px;line-height:16px;font-weight:500;color:#4A5578;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nda-cta i{width:38px;height:38px;font-size:16px}
.rv-nda:hover .nda-cta i{transform:translate(2px,-2px)}
.pt-chip{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.rv-card:hover .pt-chip{opacity:1;transform:none}
.pt-line{stroke-dasharray:1200;stroke-dashoffset:1200}
.pt-aa{font:700 96px/1 var(--font,Manrope),sans-serif;letter-spacing:-.04em}
.pt-tile{transform-box:fill-box;transform-origin:50% 50%;transform:translateY(16px) scale(.9)}
.rv-card:hover .pt-tile{opacity:.75}
.br-planfact .rv-cov .ph,.br-redis .rv-cov .ph{transition:transform .25s linear,opacity .35s}
.rv-more>.rise{opacity:0;transform:translateY(60px) scale(.97);transition:opacity .7s ease var(--rd,0ms),transform 1s cubic-bezier(.22,1,.36,1) var(--rd,0ms)}
.rv-more>.rise.in{opacity:1;transform:none}
.rv-more>.rise.in:hover{transform:translateY(-6px)}
.rv-main .rv-in{transform:scale(var(--iz,1));transform-origin:50% 50%}
.rv-main .rv-in{border-radius:var(--inr,28px)}
html[data-rv="d"] .rv-main .rv-in::before{border-radius:var(--inr,28px)}
/* corners: every layer of a card follows the card radius, and composited hover layers are clipped too (Chrome drops the rounded clip for layers with their own transform) */
.rv-card:not(.rv-main)::after,.rv-card:not(.rv-main) .rv-in,.rv-card:not(.rv-main) .rv-cov,.rv-card:not(.rv-main) .rv-pat{border-radius:inherit}

/* more air in the case text panels */
@media (min-width: 901px){
.rv-glass{gap:24px;padding:34px 26px 30px;left:18px;right:18px;bottom:18px}
.rv-glass .rv-t{line-height:1.18}
.rv-glass .cs-m{gap:18px 18px;padding:10px 0 6px}
.rv-glass .cs-m .met{gap:10px}
}
@media (max-width: 900px){.rv-glass{padding:24px 22px;gap:18px}.rv-glass .cs-m{gap:14px 18px;padding:6px 0}}
/* home NDA card: "View More Cases" first, email under it */
.nda-ctas{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.nda-ctas .nda-cta{margin-top:0;text-decoration:none}
.nda-ctas .nda-cta:hover{transform:translateY(-2px)}
.nda-cta2{background:transparent !important;border:1px solid rgba(255,255,255,.5);color:#FFFFFF !important}
.nda-cta2>svg{color:#FFFFFF !important}
.nda-cta2 .nda-ct b{color:#FFFFFF}
.nda-cta2 .nda-ct span{color:rgba(255,255,255,.75)}
.nda-cta2 i{background:rgba(255,255,255,.18) !important}
/* two cards per row (home and Work page) */
@media (min-width: 901px){
.rv-2 .rv-row,.rv-2 .rv-more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.rv-list{margin-top:0 !important}
.rv-all{grid-column:1/-1;display:flex;justify-content:center;margin-top:clamp(32px,5vh,56px)}
.rv-all .btn.git{gap:10px;min-width:220px;justify-content:center;border-radius:999px;padding:0 28px}

/* ===== Home cases: big cards stick under the header and pile up; the one underneath shrinks and dims ===== */
.cv-stack{grid-column:1/-1;display:flex;flex-direction:column;gap:12vh;padding-bottom:4vh}
.cv-it{position:sticky;top:calc(96px + var(--i) * 16px);width:min(60vw,1100px);margin:0 auto;height:min(calc(100svh - 150px),680px,46vw)}
@media (max-width: 900px){.cv-it{width:100%;height:min(calc(100svh - 170px),640px)}}
.cv-it>*{height:100% !important;transform-origin:50% 0;transform:scale(var(--s,1));will-change:transform}
.cv-it::after{content:"";position:absolute;inset:0;border-radius:28px;background:#05060A;opacity:var(--dk,0);pointer-events:none;transform-origin:50% 0;transform:scale(var(--s,1))}