/* Sürümler: two doors, one app. To play or to make; the four editions along the bottom of the doors,
   and across all of it the one thing that matters for now: free. */
@property --s{syntax:'<percentage>';inherits:true;initial-value:50%}
.sr{--a:min(1vw,1.5vh,20px);--ox:calc((100vw - var(--a) * 100) / 2);position:relative;overflow:clip;background:#0b0b0f;color:#0b0b0f}
.sr-doors{--s:50%;position:relative;height:calc(var(--a) * 68);transition:--s .5s cubic-bezier(.3,.7,.2,1)}
.sr-doors:has(.sr-a:hover){--s:52%}
.sr-doors:has(.sr-b:hover){--s:49%}
.sr-door{position:absolute;inset:0}
.sr-a{--x:calc(var(--ox) + var(--a) * 4);--d:#6d4bd8;background:#b8a3ff}
.sr-b{--x:calc(var(--ox) + var(--a) * 55);--d:#c98f0a;pointer-events:none}
.sr-edge,.sr-paper{position:absolute;inset:0;clip-path:polygon(calc(var(--s) + 3vw) 0,calc(var(--s) + 1.7vw) 13%,calc(var(--s) + 2.5vw) 29%,calc(var(--s) + .5vw) 46%,calc(var(--s) + 1.3vw) 62%,calc(var(--s) - 1.3vw) 80%,calc(var(--s) - .4vw) 100%,100% 100%,100% 0)}
.sr-edge{background:#c98f0a;translate:calc(var(--a) * -1) 0}
.sr-paper{background:#ffd43b;pointer-events:auto}
.sr-ister{position:absolute;left:var(--x);top:calc(var(--a) * 2.6);margin:0;font-size:calc(var(--a) * 3);font-weight:700;line-height:1}
.sr-word{position:absolute;left:calc(var(--x) - var(--a) * .3);top:calc(var(--a) * 6.6);display:inline-flex;width:max-content;margin:0;font-size:calc(var(--a) * 18);font-weight:800;line-height:.98;letter-spacing:-.02em;color:#0b0b0f;text-shadow:0.004em 0.004em 0 var(--d),0.008em 0.008em 0 var(--d),0.012em 0.012em 0 var(--d),0.016em 0.016em 0 var(--d),0.020em 0.020em 0 var(--d),0.024em 0.024em 0 var(--d),0.028em 0.028em 0 var(--d),0.032em 0.032em 0 var(--d),0.036em 0.036em 0 var(--d),0.040em 0.040em 0 var(--d),0.044em 0.044em 0 var(--d),0.048em 0.048em 0 var(--d),0.052em 0.052em 0 var(--d),0.056em 0.056em 0 var(--d),0.060em 0.060em 0 var(--d);clip-path:inset(-6% -6% -.08em -3%)}
.sr-word span{display:block}
.sr-col{position:absolute;z-index:2;left:var(--x);top:calc(var(--a) * 26.5);width:max(212px,calc(var(--a) * 20.5))}
.sr-col h3{margin:0;font-size:max(23px,calc(var(--a) * 2.7));font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.sr-col p{margin:calc(var(--a) * .9) 0 0;font-size:max(15px,calc(var(--a) * 1.22));line-height:1.45;text-wrap:pretty}
.sr-slab{position:absolute;z-index:1;display:block;height:auto;max-width:none;border-radius:max(5px,calc(var(--a) * .6));box-shadow:0 0 0 max(3px,calc(var(--a) * .3)) #fff,calc(var(--a) * .8) calc(var(--a) * .8) 0 max(3px,calc(var(--a) * .3)) var(--d)}
.sr-a .sr-slab{left:calc(var(--ox) + var(--a) * 25.6);top:calc(var(--a) * 22);width:calc(var(--a) * 24);transform:rotate(1.8deg)}
.sr-b .sr-slab{left:calc(var(--ox) + var(--a) * 77);top:calc(var(--a) * 25.5);width:calc(var(--a) * 25);transform:rotate(-2deg)}
.sr-vers{position:absolute;z-index:3;left:var(--x);bottom:calc(var(--a) * 5.4);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(var(--a) * 1.6);width:calc(var(--a) * 41);border-top:3px solid #0b0b0f;padding-top:calc(var(--a) * .7)}
.sr-a .sr-vers{width:calc(var(--a) * 20.5)}
.sr-vers b{display:block;font-size:max(19px,calc(var(--a) * 1.9));font-weight:800;line-height:1.1;letter-spacing:-.015em}
.sr-vers span{display:block;margin-top:calc(var(--a) * .25);font-size:max(13.5px,calc(var(--a) * 1.05));line-height:1.35}
.sr-m{position:absolute;z-index:4;left:calc(var(--ox) + var(--a) * 33);top:calc(var(--a) * 45);width:calc(var(--a) * 19);height:auto;pointer-events:none}

.sr-free{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:calc(var(--a) * 4);margin:calc(var(--a) * -3) -3vw 0;padding:calc(var(--a) * 1.9) 7vw calc(var(--a) * 2.3);background:#0b0b0f;color:#fff;box-shadow:0 calc(var(--a) * -.8) 0 #fff;transform:rotate(-1.1deg);transform-origin:50% 0}
.sr-fl .dv-mono{margin:0;color:#ffd43b;font-size:max(13px,calc(var(--a) * 1.15))}
.sr-fw{margin:calc(var(--a) * .25) 0 0;font-size:calc(var(--a) * 6.6);font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:#ffd43b;--d:#a8760a;text-shadow:0.004em 0.004em 0 var(--d),0.008em 0.008em 0 var(--d),0.012em 0.012em 0 var(--d),0.016em 0.016em 0 var(--d),0.020em 0.020em 0 var(--d),0.024em 0.024em 0 var(--d),0.028em 0.028em 0 var(--d),0.032em 0.032em 0 var(--d),0.036em 0.036em 0 var(--d),0.040em 0.040em 0 var(--d),0.044em 0.044em 0 var(--d),0.048em 0.048em 0 var(--d),0.052em 0.052em 0 var(--d),0.056em 0.056em 0 var(--d),0.060em 0.060em 0 var(--d)}
.sr-fr{flex:0 1 calc(var(--a) * 25);min-width:240px}
.sr-fr p{margin:0;color:#d8d7de;font-size:max(14.5px,calc(var(--a) * 1.18));line-height:1.45;text-wrap:pretty}
.sr-dl{display:inline-flex;align-items:center;height:46px;margin-top:calc(var(--a) * .9);padding:0 22px;border-radius:7px;background:#ffd43b;color:#0b0b0f;font:700 15.5px/1 'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;transition:background-color .15s}
.sr-dl:hover,.sr-dl:focus-visible{background:#fff;outline:0}

@media (max-width:980px){
.sr{--a:1vw;--ox:0px}
.sr-doors{height:auto}
.sr-door{position:relative;inset:auto;--x:0px;padding:9vw 16px 30px}
.sr-b{margin-top:-5vw;padding:0}
.sr-edge{display:none}
.sr-paper{position:relative;inset:auto;padding:12vw 16px 30px;clip-path:polygon(0 3vw,16% 1vw,38% 4vw,61% 1.2vw,83% 4.4vw,100% 2vw,100% 100%,0 100%)}
.sr-ister{position:static;font-size:26px}
.sr-word{position:static;margin:4px 0 0 -2px;font-size:calc(92vw / 2.75)}
.sr-slab,.sr-a .sr-slab,.sr-b .sr-slab{max-width:620px}
.sr-col{position:static;width:auto;margin-top:18px}
.sr-col h3{font-size:clamp(28px,7.4vw,44px)}
.sr-col p{font-size:16px;margin-top:10px}
.sr-slab,.sr-a .sr-slab,.sr-b .sr-slab{position:relative;left:auto;top:auto;width:100%;margin-top:26px;transform:rotate(-1deg)}
.sr-vers,.sr-a .sr-vers{position:static;display:block;width:auto;margin-top:26px;padding-top:0;border-top:0}
.sr-vers div{padding:10px 0;border-top:2px solid #0b0b0f}
.sr-vers span{font-size:15px}
.sr-m{left:auto;right:6px;top:auto;bottom:auto;display:none}
.sr-free{display:block;margin:0;padding:30px 16px 34px;box-shadow:none;transform:none}
.sr-fw{font-size:calc(91vw / 10.4)}
.sr-fr{margin-top:16px}
}
html.still .sr-doors{transition:none}

/* The three facts under the shared window: one handover told along a rail. The pieces stand on it, the
   other member's pointer walks it as the page scrolls, and at the end control is back. */
.kv{--gap:clamp(24px,3.4vw,48px);--pink:#f472b6;--blue:#4dabf7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(56px,6.4vw,92px)}
.kv-pic{grid-row:1;align-self:end;margin-bottom:22px;transition:opacity .4s,transform .5s cubic-bezier(.3,.7,.2,1)}
.kv-pic img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--line2)}
.kv-desk{position:relative;height:clamp(150px,14vw,196px);border-radius:12px;background:#161619;box-shadow:0 0 0 1px var(--line2);overflow:hidden}
.kv-desk i{position:absolute;border-radius:6px;background:#26262c;box-shadow:0 0 0 1px rgba(255,255,255,.07);filter:blur(1.6px)}
.kv-desk i:nth-child(1){left:6%;top:11%;width:36%;height:44%}
.kv-desk i:nth-child(2){left:9%;top:60%;width:30%;height:30%}
.kv-desk i:nth-child(3){right:5%;top:8%;width:28%;height:32%}
.kv-desk img{position:absolute;left:29%;top:24%;width:62%;height:auto;border-radius:6px;box-shadow:0 0 0 2px var(--pink),0 14px 30px rgba(0,0,0,.55)}
.kv-rail{position:relative;grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:subgrid;align-items:center;height:14px}
.kv-rail::before,.kv-fill{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line2)}
.kv-fill{background:var(--pink);transform:scaleX(0);transform-origin:0 50%;display:none}
.kv-dot{position:relative;width:14px;height:14px;border:2px solid var(--line2);border-radius:50%;background:var(--bg);transition:background-color .25s,border-color .25s}
.kv-dot.on{border-color:var(--pink);background:var(--pink)}
.kv-cur{--c:var(--pink);position:absolute;z-index:2;left:0;top:-4px;display:none;align-items:flex-start;color:var(--c);will-change:transform}
.kv-cur svg{display:block;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.kv-cur b{margin:16px 0 0 -4px;padding:3px 8px;border-radius:6px;background:var(--c);color:#0b0b0f;font:600 12.5px/1.2 Inter,'Segoe UI',system-ui,sans-serif;white-space:nowrap;transition:background-color .3s}
.kv-cur.back{--c:var(--blue)}
.kv-text{grid-row:3;padding-top:clamp(26px,2.4vw,34px)}
.kv-text h3{margin:0;font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.kv-text p{margin:7px 0 0;max-width:330px;font-size:15.5px;color:var(--muted);text-wrap:pretty}
.kv-live .kv-fill,.kv-live .kv-cur{display:flex}
.kv-live .kv-fill{display:block}
.kv-live .kv-pic{opacity:.34;transform:translateY(14px)}
.kv-live .kv-pic.on{opacity:1;transform:none}
@media (max-width:760px){
.kv{margin-top:44px}
.kv-rail{display:none}
.kv-pic{margin:0;align-self:stretch}
.kv-pic.s2,.kv-pic.s3{margin-top:34px}
.kv-text{padding-top:16px}
.kv{display:flex;flex-direction:column}
.kv>.kv-pic.s1{order:1}.kv>.kv-text.s1{order:2}.kv>.kv-pic.s2{order:3}.kv>.kv-text.s2{order:4}.kv>.kv-pic.s3{order:5}.kv>.kv-text.s3{order:6}
}
html.still .kv-pic{transition:none}