@font-face{font-family:"Dela Gothic One";src:url("../fonts/dela-gothic-one-cyrillic-400-normal.woff2") format("woff2");font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Dela Gothic One";src:url("../fonts/dela-gothic-one-latin-400-normal.woff2") format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-cyrillic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";src:url("../fonts/golos-text-cyrillic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";src:url("../fonts/golos-text-latin-400-normal.woff2") format("woff2");font-weight:400;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";src:url("../fonts/golos-text-cyrillic-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";src:url("../fonts/golos-text-latin-600-normal.woff2") format("woff2");font-weight:600;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Palette from his posts: satin red, brand-book ink and lime, Mikran aqua, recruitment night violet, chrome. */
:root{
  --red:#d8282a; --red-deep:#8a0f12; --red-ink:#6e0a0e;
  --ink:#2a2730; --ink-deep:#09080c; --lime:#9ff33d;
  --aqua:#0f95af; --aqua-deep:#054c5f;
  --night:#24104c; --night-deep:#04020a; --violet:#8a5cff;
  --white:#ffffff; --pill-ink:#1b1214;
  --emboss:#ffd9d4; --emboss-2:#f4a39b; --emboss-shadow:rgba(90,0,6,.42);
  --text-shadow:0 1px 14px rgba(70,0,8,.45);
  --bg:#d8282a;
  --display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --text:"Golos Text","Segoe UI",Roboto,Arial,sans-serif;
  --pad:clamp(16px,4vw,64px);
  --win-edge:rgba(0,0,0,.22); --win-drop:rgba(0,0,0,.16); --tg-edge:#2c313a; --and-edge:transparent;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --red:#7a1512; --red-deep:#1e0304; --ink:#1b1a20; --ink-deep:#040406; --aqua:#0b4f5d; --aqua-deep:#02161b; --night:#170a36; --night-deep:#020105;
    --emboss:#ff9d93; --emboss-2:#b8473f; --emboss-shadow:rgba(0,0,0,.6); --bg:#1e0304; color-scheme:dark;
    --win-edge:#767676; --win-drop:rgba(0,0,0,0); --and-edge:#2e2e2e;
  }
}
:root[data-theme="dark"]{
  --red:#7a1512; --red-deep:#1e0304; --ink:#1b1a20; --ink-deep:#040406; --aqua:#0b4f5d; --aqua-deep:#02161b; --night:#170a36; --night-deep:#020105;
  --emboss:#ff9d93; --emboss-2:#b8473f; --emboss-shadow:rgba(0,0,0,.6); --bg:#1e0304; color-scheme:dark;
  --win-edge:#767676; --win-drop:rgba(0,0,0,0); --and-edge:#2e2e2e;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;color:var(--white);font:400 18px/1.5 var(--text);background:transparent;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--white);outline-offset:4px;border-radius:8px}
::selection{background:var(--white);color:var(--red-ink)}
html[lang="ru"] [data-l="en"],html[lang="en"] [data-l="ru"]{display:none!important}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* layers */
#gl,#fg{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;display:block;pointer-events:none}
#gl{z-index:0;opacity:0;transition:opacity .9s ease}
#fg{z-index:3}
html.gl-ready #gl{opacity:1}
.bg-fallback{position:fixed;inset:0;z-index:0}
.bg-fallback i{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.f-red{background:radial-gradient(120% 90% at 30% 20%,#f04a43 0%,var(--red) 45%,var(--red-deep) 100%)}
.f-ink{background:radial-gradient(120% 90% at 70% 20%,#3a3642 0%,var(--ink) 45%,var(--ink-deep) 100%)}
.f-aqua{background:radial-gradient(120% 90% at 30% 20%,#2cc8dd 0%,var(--aqua) 45%,var(--aqua-deep) 100%)}
.f-night{background:radial-gradient(120% 90% at 15% 0%,#4a2aa0 0%,var(--night) 40%,var(--night-deep) 100%)}
html:not([data-set]) .f-red,html[data-set="red"] .f-red,html[data-set="ink"] .f-ink,html[data-set="aqua"] .f-aqua,html[data-set="night"] .f-night{opacity:1}
html.gl-ready .bg-fallback{opacity:0;transition:opacity .9s ease .3s}
main,.hdr{position:relative;z-index:1}
main{overflow-x:clip}

/* type */
.hero-title,.h2,.h3,.kinetic,.count-num,.count-label,.contact-title,.logo span,.mark{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.005em}
.hero-title,.h2,.count-label,.contact-title{
  color:var(--white);
  text-shadow:0 1px 0 var(--emboss),0 2px 0 var(--emboss),0 3px 0 var(--emboss-2),0 4px 0 var(--emboss-2),0 14px 30px var(--emboss-shadow);
}
.hand{font-family:var(--hand);font-weight:700;text-transform:none;letter-spacing:0;line-height:1;color:var(--white);text-shadow:var(--text-shadow)}
.hero-sub,.card figcaption,.unity,.case-lead,.app-text p,.contact-links{text-shadow:var(--text-shadow)}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--pad) 18px;pointer-events:none;transition:translate .55s cubic-bezier(.2,.8,.2,1)}
.hdr.hide{translate:0 calc(-100% - 10px)}
.hdr>*{pointer-events:auto}
.logo,.hdr-r{background:#fff;color:var(--pill-ink);border-radius:999px;box-shadow:0 0 0 1px rgba(27,18,20,.06),0 10px 30px -14px rgba(40,0,0,.5);flex:none}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:17px;line-height:1;padding:11px 18px 10px 14px}
.logo-spark{width:18px;height:18px;fill:#d8282a;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.logo:hover .logo-spark{transform:rotate(90deg) scale(1.2)}
.hdr-r{display:flex;align-items:center;gap:2px;padding:5px 5px 5px 10px}
.hdr-nav{display:flex;gap:2px;margin-right:6px;padding-right:8px;border-right:1px solid rgba(27,18,20,.12)}
.hdr-nav a,.tbtn{font-size:15px;font-weight:600;padding:8px 10px;border-radius:999px;transition:background .25s;white-space:nowrap;text-decoration:none}
.hdr-nav a:hover,.tbtn:hover{background:#f6e7e5}
.hdr :focus-visible{outline-color:#d8282a}
.pill{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;font-weight:600;white-space:nowrap}
.pill-sm{padding:11px 20px;font-size:15px;margin-left:4px;color:#fff;background:linear-gradient(180deg,#ef4a43,#c51d20);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(80,0,0,.3)}
.pill-sm:hover{filter:brightness(1.07)}

/* hero */
.s-hero{min-height:100svh;display:flex;align-items:center;padding:130px var(--pad) 70px}
.hero-in{position:relative;width:100%;max-width:1600px;margin:0 auto;display:grid;justify-items:start}
.hero-title{font-size:clamp(52px,12vw,220px);line-height:.88}
.hero-title .ln{display:block;white-space:nowrap}
.hero-title .ln2{padding-left:.9em}
.motion .hero-title .ln{overflow:hidden;padding-top:.12em;padding-bottom:.06em;margin-top:-.12em;margin-bottom:-.06em}
.motion .hero-title .ln2{padding-left:.9em}
.hero-title.done .ln{overflow:visible}
/* the Latin surname is longer: smaller size, shorter indent */
html[lang="en"] .hero-title{font-size:clamp(46px,10.6vw,196px)}
html[lang="en"] .hero-title .ln2{padding-left:.45em}
.hero-hand{font-size:clamp(40px,6.4vw,118px);margin:-.18em 0 0 2.4em;transform:rotate(-6deg);position:relative;z-index:2}
.hero-sub{max-width:40ch;margin-top:clamp(26px,4vh,48px);font-size:clamp(16px,1.25vw,19px);text-wrap:pretty}
.hero-spark{position:absolute;right:-3vw;top:-30%;width:min(25vw,440px);aspect-ratio:1;pointer-events:none}

/* kinetic intro */
.s-intro{padding:clamp(70px,12vh,160px) var(--pad) clamp(90px,14vh,180px)}
.kinetic{max-width:1260px;margin:0 auto;font-size:clamp(28px,3.6vw,60px);line-height:1.12;text-wrap:pretty}
.motion .kinetic .w{opacity:.2}
.ki{display:inline-block;width:2.3em;height:1em;border-radius:.5em;overflow:hidden;vertical-align:-.06em;margin:0 .12em;transform:rotate(-4deg);box-shadow:0 .1em .3em rgba(60,0,0,.35)}
.ki:nth-of-type(2n){transform:rotate(3deg)}
.ki img{width:100%;height:100%;object-fit:cover;object-position:0 50%}

/* works */
.s-works{position:relative}
.works-pin{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,4vh,40px);padding:110px 0 60px;overflow:hidden}
.works-head{padding:0 var(--pad);display:flex;align-items:flex-end;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.h2{font-size:clamp(46px,7.4vw,124px);line-height:.9}
.works-hand{font-size:clamp(30px,3.4vw,58px);padding-bottom:.2em;transform:rotate(-4deg)}
.track{position:relative;display:flex;align-items:center;gap:clamp(22px,3vw,52px);padding:4vh var(--pad);width:max-content;will-change:transform;outline:none}
/* tall posters and stories are capped by height, so every card fits the pinned screen */
.card{flex:none;width:min(clamp(240px,26vw,420px),calc(56vh * var(--ar,1)));transform:translateY(var(--dy,0));transform-style:preserve-3d}
.card.l{width:min(clamp(280px,33vw,540px),calc(56vh * var(--ar,1)))}
.card.s{width:min(clamp(200px,20vw,330px),calc(56vh * var(--ar,1)))}
.card-in{position:relative;will-change:transform}
.card-img{position:relative;border-radius:24px;overflow:hidden;background:rgba(0,0,0,.14);box-shadow:0 34px 60px -26px rgba(60,0,0,.6)}
.card-img img{width:100%;height:auto}
.card-img::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38),transparent 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity .35s}
.card:hover .card-img::after{opacity:1}
.card figcaption{position:absolute;left:14px;bottom:-16px;transform:rotate(-3deg);display:inline-flex;align-items:center;gap:8px;background:#fff;color:#c51d20;border-radius:999px;padding:9px 16px;font:600 15px/1.2 var(--text);text-shadow:none;box-shadow:0 10px 24px -10px rgba(60,0,0,.5);max-width:calc(100% - 28px)}
.card:nth-child(2n) figcaption{transform:rotate(2deg);left:auto;right:14px}

/* brand book case */
.s-case{padding:clamp(110px,16vh,190px) var(--pad)}
.case-in{max-width:1400px;margin:0 auto;display:grid;gap:clamp(30px,5vw,80px);align-items:center}
.case-title{font-size:clamp(46px,5.6vw,100px);color:#fff;--emboss:#e6ffc6;--emboss-2:#7ce701;--emboss-shadow:rgba(0,0,0,.6)}
.case-lead{margin-top:20px;max-width:36ch;font-size:clamp(17px,1.35vw,20px)}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;margin-top:34px;max-width:460px}
.swatches li{display:grid;justify-items:start;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em}
.swatches i{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:inset 0 -.4em .8em rgba(0,0,0,.25),inset 0 .25em .5em rgba(255,255,255,.35),0 12px 24px -10px rgba(0,0,0,.6);transition:scale .45s cubic-bezier(.2,.8,.2,1)}
.swatches li:hover i{scale:1.12}
.case-media{position:relative}
.case-img{border-radius:28px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.8);transform:rotate(1.5deg)}
.case-img img{width:100%}
.case-img2{position:relative;z-index:1;width:58%;margin:-7% 0 0 auto;border-radius:22px;transform:rotate(-3.5deg)}
@media (min-width:1000px){.case-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* wall of designs */
.s-wall{position:relative}
.wall-pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.wall{position:absolute;left:50%;top:50%;width:200vw;display:grid;grid-template-columns:repeat(10,1fr);gap:1.2vw;transform:translate(-50%,-50%) rotate(-8deg);transform-origin:50% 50%}
.wall img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:1vw;box-shadow:0 1vw 2vw -1vw rgba(0,0,0,.5)}
.wall-glow{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(170,12,16,.95),rgba(170,12,16,.7) 55%,rgba(170,12,16,.15));pointer-events:none}
html[data-theme="dark"] .wall-glow{background:radial-gradient(closest-side at 50% 50%,rgba(20,2,4,.95),rgba(20,2,4,.6) 55%,transparent)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .wall-glow{background:radial-gradient(closest-side at 50% 50%,rgba(20,2,4,.95),rgba(20,2,4,.6) 55%,transparent)}}
.wall-copy{position:relative;display:grid;justify-items:center;text-align:center}
.count-num{font-size:clamp(110px,21vw,370px);line-height:.82;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 0 var(--emboss),0 4px 0 var(--emboss-2),0 0 .05em rgba(255,110,100,.8),0 .05em .12em var(--emboss-shadow)}
html.fg .count-num{color:transparent;text-shadow:none}
.count-label{font-size:clamp(34px,5.4vw,90px);line-height:.95;margin-top:.12em;text-shadow:0 2px 0 var(--emboss),0 4px 0 var(--emboss-2),0 0 40px rgba(90,0,6,.9),0 14px 30px var(--emboss-shadow)}
.tag{margin-top:18px;background:#fff;color:#c51d20;border-radius:999px;padding:10px 18px;font-weight:600;font-size:clamp(15px,1.2vw,18px);transform:rotate(-3deg);box-shadow:0 10px 24px -10px rgba(60,0,0,.5)}

/* code */
.s-code{padding:clamp(110px,16vh,190px) var(--pad) clamp(80px,12vh,150px)}
.code-head{max-width:1400px;margin:0 auto clamp(40px,8vh,90px)}
.code-title{--emboss:#c8f7ff;--emboss-2:#5fc7da;--emboss-shadow:rgba(2,40,50,.5);display:block}
.code-title .ct1,.code-title .ct2{display:block}
.code-title .ct2{text-align:right}
.app{max-width:1400px;margin:0 auto clamp(70px,14vh,160px);display:grid;gap:32px;align-items:center}
.app-text{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips li{background:#fff;color:#075e75;border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;box-shadow:0 8px 20px -10px rgba(0,40,50,.5)}
.h3{font-size:clamp(30px,3.2vw,54px);line-height:.95;color:#fff;margin-bottom:16px;--emboss:#c8f7ff;text-shadow:0 2px 0 #c8f7ff,0 4px 0 #5fc7da,0 14px 28px rgba(2,40,50,.5)}
.app-text p{font-size:clamp(16px,1.25vw,19px);max-width:44ch}
.app-text .app-note{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:clamp(28px,2.6vw,40px);transform:rotate(-4deg)}
.note-arrow{width:90px;height:45px;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;order:2;filter:drop-shadow(0 2px 6px rgba(0,40,50,.4))}
.app-ui{min-width:0;display:flex;justify-content:center;perspective:1600px}
.tilt{max-width:100%;transform-origin:50% 60%;filter:drop-shadow(0 60px 60px rgba(2,40,50,.45))}
.phone{padding:12px;border-radius:52px;background:linear-gradient(135deg,#fff,#cfd6da 30%,#7d8a90 50%,#eef2f4 70%,#9aa6ab);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 60px 90px -30px rgba(0,40,50,.6);transform:rotate(-5deg)}
.phone-in{border-radius:40px;overflow:hidden;background:#000}
.float{filter:drop-shadow(0 50px 60px rgba(2,40,50,.5));transform:rotate(1.5deg)}
@media (min-width:1100px){
  .app{grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);gap:60px}
  .app-tiktok{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)}
  .app-tiktok .app-text{order:2}
}
.unity{max-width:1400px;margin:0 auto;font-family:var(--hand);font-weight:700;font-size:clamp(30px,3.2vw,52px);line-height:1.1;transform:rotate(-2deg)}

/* contact */
.s-contact{min-height:100svh;display:flex;flex-direction:column;padding:150px var(--pad) 0;position:relative}
.contact-in{display:grid;justify-items:center;text-align:center;margin:auto 0}
.contact-title{font-size:clamp(46px,8vw,150px);line-height:.9;max-width:12ch;text-wrap:balance;--emboss:#ded2ff;--emboss-2:#8a6cff;--emboss-shadow:rgba(0,0,0,.6)}
.contact-hand{font-size:clamp(40px,5.4vw,92px);margin:.1em 0 .45em;transform:rotate(-6deg);color:#f1ecff}
.cta-row{position:relative;display:grid;place-items:center}
.gloss{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:26px 54px;border-radius:999px;text-decoration:none;font:400 clamp(26px,3vw,46px)/1 var(--display);text-transform:none;color:#6e0a0e;background:linear-gradient(180deg,#fff 0%,#ffe1dd 46%,#f4aba3 54%,#fff 100%);box-shadow:inset 0 2px 0 #fff,inset 0 -8px 14px rgba(160,20,30,.32),0 22px 50px -14px rgba(0,0,0,.65);transition:scale .35s cubic-bezier(.2,.8,.2,1),translate .35s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.gloss::after{content:"";position:absolute;top:-20%;bottom:-20%;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-40%}100%{left:130%}}
.gloss:hover{translate:0 -3px;scale:1.03}
.gloss:active{scale:.96}
.contact-spark{position:absolute;right:-9vmin;top:-9vmin;width:18vmin;aspect-ratio:1;pointer-events:none}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;margin-top:40px;font-size:17px}
.contact-links a,.copy{padding:8px 2px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.5);overflow-wrap:anywhere}
.contact-links a:hover,.copy:hover{text-decoration-color:#fff}
.copy{position:relative}
.copied{position:absolute;left:50%;top:-30px;transform:translateX(-50%) rotate(-4deg);background:#fff;color:#4b2bb0;border-radius:999px;padding:4px 12px;font:600 13px/1.3 var(--text);white-space:nowrap;text-shadow:none;opacity:0;transition:opacity .25s}
.copied:not(:empty){opacity:1}
.foot{margin-top:auto;padding-top:70px;display:grid;justify-items:center;overflow:hidden}
.mark{font-size:min(24vw,40vh);line-height:1.08;text-transform:lowercase;background:linear-gradient(178deg,#fff 0%,#f3f1ff 30%,#9e98b8 46%,#3d3654 50%,#d9d4ee 56%,#fff 72%,#b9b3cf 100%);background-size:100% 250%;background-position:50% 40%;-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-line{margin:0 0 18px;font-size:14px;opacity:.85}

/* replicas */
.fit { position: relative; max-width: 100%; }
html:not(.js) .fit { overflow-x: auto; }
.fit > .scaler { transform-origin: 0 0; }
/* when the window is scaled down on a phone, thicken the thin state lines so they survive the scale */
.fit.small .wbtn.default, .fit.small .wbtn:focus-visible { border-width: 2px; }
.fit.small .tbox:focus, .fit.small .dtp:focus, .fit.small .dtp:focus-within, .fit.small .cmb:focus { outline: 1px solid #0067c0; outline-offset: -2px; }
.fit.small .wbtn::after { content: ""; position: absolute; inset: -3px -2px; }

/* ---------- Win11 replica ---------- */
.win {
  position: relative;
  width: 718px; height: 317px;
  border: 1px solid var(--win-edge);
  border-radius: 8px;
  background: #f0f0f0;
  overflow: hidden;
  color: #000;
  font: 400 12px/16px "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
.win-wrap { filter: drop-shadow(0 8px 16px var(--win-drop)); }
.win-bar {
  position: absolute; left: 0; top: 0; right: 0; height: 33px;
  background: #ecf5f4;
  display: flex; align-items: center;
}
.win-icon { position: absolute; left: 11px; top: 11px; }
.win-title { position: absolute; left: 30px; top: 8px; font-size: 12px; line-height: 16px; color: #1b1b1b; }
.win-cap { position: absolute; right: 0; top: 0; height: 33px; display: flex; }
.win-cap span { width: 46px; height: 33px; display: grid; place-items: center; }
.win-body { position: absolute; left: 0; top: 33px; right: 0; bottom: 0; }

.lb {
  position: absolute; left: 10px; top: 6px; width: 376px; height: 183px;
  margin: 0; padding: 1px 0; list-style: none;
  background: #fff; border: 1px solid #adadad;
  overflow-y: auto; overflow-x: hidden;
  outline: none;
  cursor: default;
}
.lb li { padding: 0 3px; height: 15px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.lb li[aria-selected="true"] { background: #0078d7; color: #fff; }
.lb:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.lb:focus-visible li.cur, .lb.hint li.cur { outline: 1px dotted #000; outline-offset: -1px; }
.lb:focus-visible li.cur[aria-selected="true"], .lb.hint li.cur[aria-selected="true"] { outline-color: #fff; }

.wbtn {
  position: absolute; left: 11px; width: 85px; height: 20px;
  font: inherit; color: #000; line-height: 16px; padding: 0;
  background: #fdfdfd; border: 1px solid #d0d0d0; border-radius: 4px;
  cursor: default;
}
.wbtn:hover { background: #e0eef9; border-color: #0078d4; }
.wbtn:active { background: #cce4f7; border-color: #005499; }
.wbtn.default { border-color: #0067c0; }
.tbox[aria-invalid="true"] { border-color: #e81123; }
.wbtn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; border-color: #0067c0; }
.wbtn.b-del { top: 196px; }
.wbtn.b-add { top: 222px; }
.wbtn.b-red { top: 248px; }

.gb {
  position: absolute; left: 391px; top: 13px; width: 315px; height: 258px;
  border: 1px solid #dcdcdc; border-radius: 4px;
}
.gb-cap { position: absolute; left: 6px; top: -9px; padding: 0 2px; background: #f0f0f0; color: #000; }
.gb label { position: absolute; left: 7px; height: 21px; line-height: 21px; white-space: nowrap; }
.gb .fld { position: absolute; left: 123px; width: 171px; height: 21px; }
.r1 { top: 18px; } .r2 { top: 57px; } .r3 { top: 99px; } .r4 { top: 145px; } .r5 { top: 184px; }
.tbox {
  font: inherit; color: #000; margin: 0;
  background: #fff; border: 1px solid #e6e6e6; border-bottom-color: #c9c9c9;
  padding: 1px 4px; border-radius: 0;
}
.tbox:focus { outline: none; border-color: #0067c0; border-bottom-width: 1px; }
.tbox:focus-visible { outline: none; }
.dtp {
  background: #fff; border: 1px solid #7a7a7a;
}
.dtp-v { position: absolute; left: 7px; top: 2px; white-space: pre; pointer-events: none; }
.dtp-g { position: absolute; right: 4px; top: 4px; pointer-events: none; }
.dtp input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; margin: 0; padding: 0; cursor: default;
  font: inherit;
}
.dtp:focus-within { border-color: #0067c0; }
.dtp:focus { outline: none; border-color: #0067c0; }
.dtp:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
.cmb {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: #000; margin: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23606060' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 7px center;
  border: 1px solid #7a7a7a; border-radius: 0;
  padding: 0 24px 0 3px;
}
.cmb:focus { outline: none; border-color: #0067c0; }
.cmb:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }

/* ---------- Telegram replica ---------- */
.tg {
  width: 100%; max-width: 822px;
  background: #11141a;
  color: #f5f5f5;
  border: 1px solid var(--tg-edge);
  font: 400 15px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
  overflow: hidden;
}
.tg-head { background: #191c22; height: 62px; padding: 10px 20px 0; }
.tg-name { display: block; font-weight: 600; font-size: 15px; line-height: 21px; color: #f5f5f5; }
.tg-sub { display: block; font-size: 14px; line-height: 20px; color: #8a8f9a; }
.tg-log {
  height: 360px; overflow-y: auto;
  padding: 8px 16px 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  outline: none;
  scrollbar-color: #2b313b transparent;
  scrollbar-width: thin;
}
.tg-log:focus-visible { outline: 2px solid #92c3f5; outline-offset: -2px; }
.tg-log > :first-child { margin-top: auto; }
.tg-row { display: flex; align-items: flex-end; gap: 12px; }
.tg-av { width: 41px; height: 41px; border-radius: 50%; flex: none; display: block; }
.tg-b {
  position: relative;
  max-width: min(523px, calc(100% - 53px));
  padding: 7px 14px 8px 15px;
  border-radius: 14px;
  background: #1c2028;
  overflow-wrap: anywhere;
}
.tg-b.out { background: #3d4a5c; }
.tg-sp { display: inline-block; width: 40px; height: 1px; }
.tg-b.out .tg-sp { width: 62px; }
.tg-t {
  position: absolute; right: 12px; bottom: 6px;
  font-size: 13px; line-height: 16px; color: #858b98;
  display: inline-flex; align-items: center; gap: 4px;
}
.tg-b.out .tg-t { color: #b9c6d9; }
.tg-b.out .cmd { color: #c2d8f5; }
.cmd {
  font: inherit; color: #92c3f5; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-decoration: none;
}
.cmd:hover { text-decoration: underline; }
.cmd:focus-visible { outline: 2px solid #92c3f5; outline-offset: 1px; border-radius: 2px; }
.tg-in {
  display: flex; align-items: center;
  background: #191c22; height: 54px; padding: 0 8px 0 20px;
  border-top: 1px solid #0b0d11;
}
.tg-in input {
  flex: 1; min-width: 0; height: 40px;
  background: transparent; border: 0; color: #f5f5f5;
  font: inherit; font-size: 15px; padding: 0;
  outline: none;
}
.tg-in input::placeholder { color: #8a8f9a; opacity: 1; }
.tg-in input:focus-visible { outline: 2px solid #92c3f5; outline-offset: 2px; }
@supports selector(:has(*)) {
  .tg-in input:focus-visible { outline: none; }
  .tg-in:has(input:focus-visible) { outline: 2px solid #92c3f5; outline-offset: -2px; }
}
.tg-send {
  width: 44px; height: 44px; border: 0; background: none; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
}
.tg-send:focus-visible { outline: 2px solid #92c3f5; outline-offset: -2px; }

/* ---------- Android replica ----------
   Drawn at the screenshot's own size (592x1280) and shown at half, so the
   field keeps a 22px font and phones do not zoom in when it gets focus. */
.and-box {
  position: relative;
  width: 296px; height: 640px;
  overflow: hidden;
  outline: 1px solid var(--and-edge);
}
.and {
  position: absolute; left: 0; top: 0;
  width: 592px; height: 1280px;
  transform: scale(0.5); transform-origin: 0 0;
  background: #1f1f1f;
  color: #fff;
  font: 400 22px/1.3 system-ui, "Segoe UI", sans-serif;
  color-scheme: dark;
}
.and-sb {
  height: 54px; background: #260c91;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 24px;
  font-size: 21px; font-weight: 600; letter-spacing: 0.01em;
}
.and-ic { display: flex; align-items: center; gap: 10px; }
.and-bat {
  display: inline-block; min-width: 36px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: #e8e6f2; color: #260c91;
  font-size: 15px; line-height: 20px; font-weight: 700; text-align: center;
}
.and-h { position: absolute; left: 24px; top: 78px; font-size: 30px; line-height: 40px; font-weight: 600; color: #9c8fdc; }
.and form { position: absolute; left: 0; right: 0; top: 178px; }
.and-url {
  position: absolute; left: 36px; width: 518px; top: 0; height: 50px;
  background: transparent; color: #fff;
  border: 0; border-bottom: 2px solid #bbbbbb; border-radius: 0;
  font: inherit; font-size: 22px; padding: 0 2px 6px; margin: 0;
  outline: none;
}
.and-url::placeholder { color: #8a8a8a; opacity: 1; }
.and-url:focus { border-bottom: 4px solid #a89be2; }
.and-btn {
  position: absolute; left: 30px; width: 530px; top: 84px; height: 68px;
  background: #a89be2; color: #302655;
  border: 0; border-radius: 16px;
  font: inherit; font-size: 22px; cursor: pointer;
}
.and-btn:active { background: #9a8bd9; }
.and-btn:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.and-url:focus-visible { outline: none; }
.and-msg {
  position: absolute; left: 36px; right: 36px; top: 180px;
  font-size: 22px; line-height: 1.4; color: #d4d4d4;
}
.and-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: #000; display: grid; place-items: center; }
.and-nav i { display: block; width: 208px; height: 4px; border-radius: 2px; background: #a0a0a0; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }


.app .fit{max-width:100%}
.fit.scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}

/* reduced motion and no pin: works become a swipeable strip */
html:not(.motion) .works-pin{min-height:auto}
html:not(.motion) .track,.track.strip{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding-bottom:28px;scrollbar-width:none}
html:not(.motion) .track::-webkit-scrollbar,.track.strip::-webkit-scrollbar{display:none}
html:not(.motion) .card,.track.strip .card{scroll-snap-align:start}
html:not(.motion) .wall-pin{height:auto;min-height:100svh}

/* tablet portrait */
@media (min-width:701px) and (max-aspect-ratio:1/1){
  .card{width:min(56vw,calc(44vh * var(--ar,1)))} .card.l{width:min(64vw,calc(50vh * var(--ar,1)))} .card.s{width:min(46vw,calc(36vh * var(--ar,1)))}
  .hero-spark{width:38vw;right:-4vw;top:-34vw}
}

/* phone and short landscape */
@media (max-width:700px),(max-height:560px){
  body{font-size:17px}
  .hdr{padding-left:12px;padding-right:12px;gap:8px}
  .hdr-nav,.pill-sm{display:none}
  .tbtn{font-size:13px;padding:10px 7px}
  .hdr-r{padding:3px}
  .logo{padding:10px 12px 9px 10px;font-size:14px;gap:7px}
  .logo-spark{width:15px;height:15px}
  .s-hero{padding-top:120px;align-items:flex-end;padding-bottom:12vh}
  .hero-title{font-size:12.4vw}
  .hero-title .ln2,.motion .hero-title .ln2{padding-left:.3em}
  html[lang="en"] .hero-title{font-size:10.6vw}
  html[lang="en"] .hero-title .ln2{padding-left:.2em}
  .hero-hand{margin-left:1.2em}
  .hero-spark{width:60vw;right:-6vw;top:-66vw}
  .kinetic{font-size:clamp(24px,7vw,34px);line-height:1.16}
  .works-pin{min-height:auto;padding:90px 0 40px}
  .track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding-bottom:30px;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card,.card.l,.card.s{width:min(78vw,calc(58vh * var(--ar,1)));scroll-snap-align:start;--dy:0!important}
  .case-img2{width:72%;margin-top:-5%}
  .h2{font-size:9.6vw}
  .h3{font-size:8.2vw}
  .count-num{font-size:30vw}
  .wall{width:340vw}
  .contact-title{font-size:11vw}
  .contact-spark{width:26vw;right:-12vw;top:-14vw}
  .gloss{padding:20px 38px}
  .mark{font-size:25vw}
  .tg-in input{font-size:16px}
}
/* phone on its side: sizes follow the short height */
@media (max-height:560px) and (min-aspect-ratio:1/1){
  .s-hero{align-items:center;padding-top:90px;padding-bottom:40px}
  .hero-title{font-size:min(12.4vw,19vh)}
  html[lang="en"] .hero-title{font-size:min(10.6vw,17vh)}
  .hero-hand{font-size:min(10vw,13vh)}
  .hero-spark{width:46vh;right:0;top:-12%}
  .h2{font-size:min(9.6vw,17vh)}
  .h3{font-size:min(8.2vw,12vh)}
  .count-num{font-size:min(30vw,40vh)}
  .count-label{font-size:min(9vw,13vh)}
  .contact-title{font-size:min(11vw,16vh)}
  .contact-hand{font-size:min(10vw,13vh)}
  .mark{font-size:min(25vw,38vh)}
  .card,.card.l,.card.s{width:min(78vw,calc(62vh * var(--ar,1)))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}