@font-face{font-family:Dela;src:url(fonts/dela-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2726}
@font-face{font-family:Dela;src:url(fonts/dela-cyr.woff2) format("woff2");font-display:swap;unicode-range:U+0301,U+0400-045F}
@font-face{font-family:Onest;src:url(fonts/onest-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Onest;src:url(fonts/onest-cyr.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --void:#040404;--pink:#f2f2f0;--disp:Dela,Onest,sans-serif;--text:#f4f4f2;--ash:#b8b8b6;--fog:#7a7a78;--lilac:#e8e8e4;
  --glass:rgba(255,255,255,.055);--rim:rgba(255,255,255,.14);
  --sans:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
  --sec:clamp(64px,12vh,120px);--gl:max(20px,env(safe-area-inset-left,0px));--gr:max(20px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,p{margin:0}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}

.sky{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--void)}
.sky i{position:absolute;border-radius:50%;filter:blur(70px)}
.sky i:nth-child(1){left:-12%;top:8%;width:52vmax;height:52vmax;background:radial-gradient(closest-side,#ffffff09,#ffffff00)}
.sky i:nth-child(2){right:-14%;top:-6%;width:60vmax;height:60vmax;background:radial-gradient(closest-side,#ffffff0b,#ffffff00)}
.sky i:nth-child(3){left:22%;bottom:-30%;width:64vmax;height:54vmax;background:radial-gradient(closest-side,#ffffff06,#ffffff00)}
.fold{position:fixed;left:0;top:0;width:100%;height:100lvh;z-index:-2;pointer-events:none}
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.05;pointer-events:none}
.foot,.nav{position:relative;z-index:1}
main{position:relative}
main{overflow-x:clip}

.nav{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:0;right:0;z-index:5;display:flex;justify-content:center;pointer-events:none}
.nav nav{pointer-events:auto;display:flex;gap:2px;padding:5px;border-radius:99px;background:rgba(14,14,15,.8);box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);font-size:14px}
.logo-mark{display:block;width:22px;height:22px}
.nav a{padding:7px 16px;border-radius:99px;color:#dddbe6;transition:background .3s,color .3s}
@media (hover:hover){.nav a:hover{background:rgba(255,255,255,.1);color:#fff}}
.nav a:active{background:rgba(255,255,255,.1)}

.about{max-width:34em;margin:clamp(10px,1.8vh,16px) 0 0;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:#c8c8c6;text-align:center;text-wrap:balance}

.work{position:relative;z-index:2;margin-top:clamp(56px,9vh,96px);padding-inline:var(--gl) var(--gr)}
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.in,.tile{position:relative;display:block;min-width:0;overflow:hidden;isolation:isolate;border-radius:20px;background:rgba(255,255,255,.028);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.08),0 30px 70px -30px #000;
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);transition:color .45s,box-shadow .5s;will-change:transform}
.row .in{height:clamp(420px,54svh,500px)}
/* a light fill grows from the pointer */
.flood{position:absolute;inset:0;background:#f2f1f6;clip-path:circle(0 at var(--fx,50%) var(--fy,50%));transition:clip-path .85s var(--out)}
.act>.flood{clip-path:circle(150% at var(--fx,50%) var(--fy,50%))}
.in.act,.tile.act{color:#0c0b12}
.body{position:relative;display:flex;flex-direction:column;height:100%;padding:20px 22px}
.top{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ash);transition:color .45s}
.act .top{color:#4a4856}
.arr{width:20px;height:20px;flex:none;color:currentColor;transition:transform .7s var(--out)}
.act .arr{transform:translate(3px,-3px) scale(1.12)}
.art{position:relative;display:block;flex:1;min-height:0;margin-block:10px;transition:opacity .35s}
.txt{display:block}
.h3{display:block;font-size:clamp(25px,2.3vw,32px);line-height:1.1;font-weight:500;letter-spacing:-.02em;overflow-wrap:anywhere}
.line{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ash);transition:color .45s}
.act .line,.act .st{color:#4a4856}
.has-live .act .st i{background:#0c0b12;box-shadow:none;animation:none}
.more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s var(--out),opacity .45s}
.mi{display:block;overflow:hidden;min-height:0;font-size:14px}
.mi span{display:block;padding:7px 0;border-top:1px solid #0c0b1226}
.mi span:first-child{margin-top:12px}
.act .more{grid-template-rows:1fr;opacity:1}


.how{margin-top:var(--sec);padding-inline:var(--gl) var(--gr)}
.feat{--phase:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,88px);align-items:center;padding-block:clamp(28px,5vh,56px);color:#f5f5f5}
.feat.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feat.flip .f-text{order:2}
.f-text{min-width:0;display:flex;flex-direction:column;justify-content:center}
.who{font-size:14px;font-weight:500;color:#fff;margin-bottom:14px}

.f-text h2{margin:0;max-width:13em;font-size:clamp(30px,3.1vw,52px);line-height:1.06;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.f-text p{margin-top:22px;font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:#aaa;max-width:31em;text-wrap:pretty}
.feat .link{align-self:flex-start;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;max-width:100%;margin-top:32px;padding:14px 20px;border:1px solid #fff;border-radius:12px;background:linear-gradient(#fff,#dedede);box-shadow:0 4px 16px #0003,inset 0 1px 0 #fff;color:#111;font-weight:500;font-size:14px;line-height:1.4;transition:transform .3s var(--out),box-shadow .3s,border-color .3s}
.feat .link::after{content:"↗";font-size:20px;font-weight:400;line-height:1;transition:transform .3s var(--out)}
.feat .link:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0006}
.feat .link:hover::after{transform:translate(2px,-2px)}
.feat .frame{min-width:0}
.feat .shots{position:relative;height:clamp(460px,66svh,600px)}
.feat .shots .ui{position:absolute;inset:0;display:grid;place-items:center;grid-template-columns:minmax(0,1fr);padding:clamp(4px,1.6vw,24px);opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .45s ease,transform .7s var(--out),visibility 0s .45s}
.feat .shots .ui.on{z-index:1;opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .7s var(--out)}
.ui-stack{position:relative;width:min(100%,540px)}
.ui-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2vw,28px);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.015) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.09),0 50px 90px -40px #000;color:#f4f4f2}
.ui-card h3{margin:0;font-size:clamp(25px,2.5vw,36px);line-height:1.08;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.ui-sub{margin-top:-7px;font-size:14px;color:var(--ash)}
.ui-sat{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:99px;background:#f4f4f2;color:#0a0a0b;font-size:14px;font-weight:500;box-shadow:0 18px 40px -12px #000;white-space:nowrap}
.ui-sat .ic{width:17px;height:17px}
.ui-sat.tr{top:-14px;right:-10px}
.ic{width:20px;height:20px;flex:none}
/* photo */
/* buttons, rows */
.ui-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ui-btn{display:block;padding:13px 10px;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);text-align:center;font-size:14px;font-weight:500}
.ui-btn.solid{background:#f4f4f2;color:#0a0a0b;box-shadow:none}
/* media */
.ui-input{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-radius:16px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:16px;min-width:0}
.ui-chips{display:flex;flex-wrap:wrap;gap:6px}
/* chat stats */
.ui-big{font-size:clamp(46px,5.4vw,76px);line-height:1;font-weight:500;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.ui-chart{display:flex;align-items:flex-end;gap:4px;height:clamp(66px,8vw,92px)}
.ui-chart i{flex:1;height:var(--h);border-radius:4px 4px 1px 1px;background:linear-gradient(#f4f4f2,#ffffff40);transform-origin:bottom}
.ui-top{display:grid;gap:9px;padding-top:4px}
.ui-top div{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:4px 10px;font-size:14px;font-weight:500}
.ui-top b{color:var(--ash);font-weight:500}
.ui-top em{font-style:normal;color:var(--ash);font-variant-numeric:tabular-nums}
.ui-top u{grid-column:2/-1;display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,#f4f4f2 calc(var(--v)*100%),#ffffff17 0)}
.ui-cmds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ui-cmds button{min-width:0;border:0;color:inherit;font-family:inherit;cursor:pointer;transition:background .25s,color .25s;padding:11px 8px;border-radius:12px;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);text-align:center;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.ui-cmds button:hover,.ui-cmds .hit{background:#f4f4f2;color:#0a0a0b;font-weight:500}
.ui-log{display:flex;flex-direction:column;gap:7px;height:clamp(150px,27svh,236px);overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(#0000,#000 22px);mask-image:linear-gradient(#0000,#000 22px)}
.ui-log::-webkit-scrollbar{display:none}
.ui-log p:first-child{margin-top:auto}
.ui-log p{flex:none;overflow-wrap:anywhere}
.ui-log .fresh{animation:fresh .45s var(--out) both;transform-origin:0 100%}
.ui-log .bot.fresh{transform-origin:100% 100%}
@keyframes fresh{from{opacity:0;transform:scale(.94)}}
.ui-log p{align-self:flex-start;max-width:92%;padding:9px 13px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.07);font-size:14px;line-height:1.35}
.ui-log p b{display:block;font-size:13px;font-weight:500;color:var(--ash)}
.ui-log .bot{align-self:flex-end;background:#f4f4f2;color:#0a0a0b;border-radius:12px 12px 4px 12px}
.ui-log .bot b{color:#555}
/* entrance */
.ui.play .pop{animation:pop .75s var(--out) both;animation-delay:var(--d,.08s)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.ui.play .ui-chart i{animation:grow .8s var(--out) both;animation-delay:calc(var(--n)*22ms)}
@keyframes grow{from{transform:scaleY(.05)}}
@media (max-width:560px){
  .ui-sat.tr{right:2px}
  .ui-card{border-radius:20px}
  .ui-cmds button{font-size:13px;padding-inline:4px}
}
.feat .steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:32px;padding-bottom:12px;border-bottom:1px solid #ffffff1f;isolation:isolate}
.feat .steps::before{content:"";position:absolute;left:0;bottom:-1px;width:calc(100% / 3);height:2px;background:#eee;transform:translateX(calc(var(--phase) * 100%));transition:transform .65s var(--out);box-shadow:0 -3px 12px #ffffff26}
.feat .step{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:74px;padding:8px 6px;border:0;border-radius:8px;background:transparent;color:#b0b0ae;font:500 14px/1.4 var(--sans);text-align:left;cursor:pointer;transition:color .3s,background .3s}
.feat .step:not(:last-child)::after{content:"";position:absolute;top:22px;left:42px;right:10px;height:1px;background:#ffffff21}
.feat .step span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff26;border-radius:50%;background:#ffffff05;color:#aaa;font-size:12px;font-variant-numeric:tabular-nums;transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.feat .step:hover{color:#fff;background:#ffffff05}
.feat .step.on{color:#fff}
.feat .step.on span{color:#111;background:#eee;border-color:#eee;box-shadow:0 0 16px #ffffff14}
.ui-tag{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ash)}
.ui-tag i{width:7px;height:7px;border-radius:50%;background:#f4f4f2;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ui-input input{flex:1;min-width:0;border:0;outline:0;background:none;color:#fff;font:inherit}
.ui-input input::placeholder{color:#8a8a88}
.ui-input:focus-within{box-shadow:inset 0 0 0 1px #fff}
.ui-input button{position:relative;width:42px;height:42px;flex:none;border:0;border-radius:12px;background:#f4f4f2;cursor:pointer}
.ui-input button::after{content:"";position:absolute;left:17px;top:14px;border-left:12px solid #0a0a0b;border-block:7px solid #0000}
.ui-chips button{padding:9px 13px;border:0;border-radius:99px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#ddd;font:500 14px var(--sans);cursor:pointer;transition:background .25s,color .25s}
.ui-chips button:hover{background:#f4f4f2;color:#0a0a0b}
.ui-cmds button:focus-visible,.ui-chips button:focus-visible,.ui-input button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.feat.run .steps::before{transform-origin:left;animation:fillbar 6s linear both}
.feat.away .steps::before,.feat:has(.shots:hover) .steps::before{animation-play-state:paused}
@keyframes fillbar{from{transform:translateX(calc(var(--phase)*100%)) scaleX(0)}to{transform:translateX(calc(var(--phase)*100%)) scaleX(1)}}
.feat .notes{display:grid;margin-top:16px}
.feat .note{grid-area:1/1;margin:0;max-width:31em;color:#e4e4e2;font-size:14px;line-height:1.55;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s ease,transform .5s var(--out),visibility 0s .3s}
.feat .note.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .08s,transform .5s var(--out) .08s}
.feat .step:focus-visible,.feat .link:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:900px){
  .feat,.feat.flip{gap:20px}
  .feat .f-text h2{max-width:18em;font-size:clamp(32px,5vw,44px)}
  .feat .f-text p{max-width:36em}
  .feat .steps{width:100%;max-width:420px}
  .feat .shots{height:clamp(470px,124vw,560px)}
}
@media (max-width:450px){
  .feat .f-text h2{font-size:32px}
  .feat .f-text p{margin-top:18px;font-size:14px}
  .feat .steps{margin-top:26px}
  .feat .step{font-size:13px;padding-inline:4px}
  .feat .link{margin-top:26px;font-size:13px;padding:13px 16px}
}
@media (prefers-reduced-motion:reduce){
  .feat .shots .ui{transform:none}
  .feat .link:hover,.feat .link:hover::after{transform:none}
}

.contact{margin-top:var(--sec);padding-inline:var(--gl) var(--gr)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{display:flex;align-items:center;gap:clamp(16px,2vw,26px);padding:clamp(20px,2.4vw,34px);height:clamp(120px,22vh,190px)}
.mark{position:relative;width:clamp(44px,5vw,72px);height:clamp(44px,5vw,72px);flex:none;fill:currentColor}
.t-addr{position:relative;font-size:clamp(20px,2.4vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.1;min-width:0;overflow-wrap:anywhere}
.tile .arr{position:relative;margin-left:auto}

.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:var(--sec) var(--gr) 0 var(--gl);padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid #ffffff17;font-size:14px;color:var(--ash);font-variant-numeric:tabular-nums}
.foot>:last-child{justify-self:end}
.f-brand{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:500}

/* only the entrance is staggered: hover colours must answer at once */
.js .rv{opacity:0;translate:0 30px;transition:opacity 1.1s var(--out) var(--rv,0s),translate 1.1s var(--out) var(--rv,0s),color .45s,box-shadow .5s,transform var(--tf,.6s) var(--out)}
.rv.act{--tf:.12s}
.js .rv.in-v{opacity:1;translate:none}

@media (max-width:900px){
  .feat,.feat.flip{grid-template-columns:minmax(0,1fr)}
  .feat.flip .f-text{order:0}
    .row{grid-template-columns:minmax(0,1fr);gap:10px}
  .row .in{height:auto}
  .in .body{display:grid;grid-template-columns:minmax(0,1fr) 80px;grid-template-areas:"t a";column-gap:12px;align-items:center;padding:16px 18px}
  .in .top{display:none}
  .in .art{grid-area:a;height:60px;margin:0}
  .in .txt{grid-area:t}
  .more{display:none}
}
@media (max-width:560px){
  .tiles{grid-template-columns:minmax(0,1fr);gap:10px}
  .tile{height:76px;padding:14px 18px}
  .mark{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;translate:none}
}
@media (max-width:560px){
  .nav a{padding:7px 11px;font-size:13px}
  .tile .arr{width:18px;height:18px}
  .f-mid{display:none}
  .foot{grid-template-columns:1fr auto}
}
/* phones: re-blurring the moving background every frame is what makes them stutter, so the glass turns solid */
@media (max-width:900px),(hover:none){
  .grain,.sky i{display:none}
  .in,.tile,.ui-card,.nav nav{-webkit-backdrop-filter:none;backdrop-filter:none;will-change:auto}
  .in,.tile{background:linear-gradient(160deg,#1a1a1b,#0e0e0f 60%)}
  .ui-card{background:linear-gradient(160deg,#1c1c1d,#0e0e0f 55%)}
  .nav nav{background:rgba(14,14,15,.94)}
}
/* phones: picture first, swipe strip right above its numbers */
@media (max-width:900px){
  :root{--sec:clamp(56px,9vh,84px)}
  body{-webkit-tap-highlight-color:transparent}
  .feat,.feat.flip{--pw:min(84vw,420px);gap:0;align-items:start;padding-block:40px}
  .f-text{display:contents}
  .who{order:1;margin-bottom:10px}
  .f-text h2{order:2}
  .f-text>p:not(.who){order:3;margin-top:14px}
  .feat .frame{order:4}
  .feat .steps{order:5;width:var(--pw);max-width:none;justify-self:center}
  .feat .notes{order:6;width:var(--pw);margin-top:14px;justify-self:center;text-align:center}
  .feat .note{max-width:none;text-wrap:balance}
  .feat .link{order:7;margin-top:22px;width:var(--pw);justify-self:center}

  .feat .shots{display:flex;align-items:center;gap:12px;height:auto;margin:6px calc(-1*var(--gr)) 0 calc(-1*var(--gl));padding:20px calc((100vw - var(--pw))/2);
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .feat .shots::-webkit-scrollbar{display:none}
  .feat .shots .ui,.feat .shots .ui.on{position:relative;inset:auto;flex:0 0 var(--pw);min-width:0;display:block;padding:0;visibility:visible;transform:none;scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .3s ease}
  .feat .shots .ui{opacity:.4}
  .feat .shots .ui.on{opacity:1}
  /* every panel on the phone is one size, the content spreads inside it */
  .feat .shots .ui,.feat .shots .ui.on{height:384px}
  .ui-stack{width:100%;height:100%;display:flex;flex-direction:column}
  .ui.on .pop{animation:none}
  .ui-card{flex:1;min-height:0;padding:20px}
  .ui-sub+*,.ui-card>.ui-sub~:last-child{margin-top:auto}
  .ui-chart{flex:1;height:auto;min-height:0}
  .ui-cmds{flex:1;grid-auto-rows:1fr}
  .ui-log{flex:1;height:0;min-height:0}
  #chat-form~.ui-chips button:nth-child(n+4){display:none}
  .feat .steps{margin-top:0}

  .feat .steps::before{transition:none}
  .feat .step:not(:last-child)::after{left:calc(50% + 20px);right:calc(-50% + 20px)}
  .feat .step{align-items:center;text-align:center;min-height:0;gap:8px;padding:6px 4px;color:color-mix(in srgb,#fff calc(var(--a,0)*100%),#a0a09e);transition:none}
  .feat .step span{background:rgb(238 238 238/var(--a,0));color:color-mix(in srgb,#111 calc(var(--a,0)*100%),#aaa);transition:none}
  .feat .step.on span{background:rgb(238 238 238/var(--a,1));color:color-mix(in srgb,#111 calc(var(--a,1)*100%),#aaa)}

  .ui-input input{font-size:16px}
}
/* touch: a tap gives a press, and hover styles do not stay stuck after it */
@media (hover:none){
  .feat.run:not(.away):has(.shots:hover) .steps::before{animation-play-state:running}
  .in,.tile{transition:color .45s,box-shadow .5s,scale .2s var(--out)}
  .in:active,.tile:active{scale:.98}
  .feat .link:active{scale:.98}
  .feat .link:hover{transform:none;box-shadow:0 4px 16px #0003,inset 0 1px 0 #fff}
  .feat .step:hover{background:transparent}
  .ui-chips button:hover{background:rgba(255,255,255,.06);color:#ddd}
  .ui-chips button:active{background:#f4f4f2;color:#0a0a0b}
  .ui-cmds button:hover:not(.hit){background:rgba(255,255,255,.055);color:inherit;font-weight:500}
  .ui-cmds button:active{background:#f4f4f2;color:#0a0a0b}
}
/* the narrowest phones */
@media (max-width:360px){
  .ui-cmds button{padding-inline:1px;font-size:11.5px;white-space:nowrap}
  .ui-sat{padding:6px 11px 6px 9px;font-size:12px}
  .ui-sat .ic{width:14px;height:14px}
}
/* proxy demo: each panel plays one short story when it becomes active; the base style is its last frame */
.kx-stage{position:relative;display:grid;place-items:center;align-content:center;gap:14px;height:190px;min-width:0}
.kx-ticket{display:flex;width:min(100% - 24px,290px);color:#0a0a0b;filter:drop-shadow(0 18px 26px #000a)}
.kx-main{position:relative;flex:1;min-width:0;display:grid;gap:3px;padding:16px 14px 16px 18px;overflow:hidden;border-right:2px dashed #0a0a0b40;border-radius:16px 0 0 16px;
  background:radial-gradient(circle 9px at 100% 0,#0000 97%,#f4f4f2) top/100% 51% no-repeat,radial-gradient(circle 9px at 100% 100%,#0000 97%,#f4f4f2) bottom/100% 51% no-repeat}
.kx-main small{visibility:hidden;font-size:12px}
.kx-main b{font:400 21px/1.15 var(--disp);letter-spacing:-.01em}
.kx-main>span{margin-top:7px;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap;color:#4a4a48}
.kx-shine{position:absolute;inset:0 auto 0 0;width:45%;background:linear-gradient(100deg,#fff0,#fff,#fff0);transform:translateX(320%) skewX(-16deg);pointer-events:none}
.kx-stamp{position:absolute;right:10px;top:9px;padding:3px 9px;border:2px solid #0a0a0b;border-radius:8px;font:400 13px/1.2 var(--disp);font-style:normal;text-transform:uppercase;transform:rotate(-9deg)}
.kx-stub{flex:0 0 68px;display:grid;place-items:center;border-radius:0 16px 16px 0;transform:translate(5px,-3px) rotate(5deg);transform-origin:0 100%;
  background:radial-gradient(circle 9px at 0 0,#0000 97%,#f4f4f2) top/100% 51% no-repeat,radial-gradient(circle 9px at 0 100%,#0000 97%,#f4f4f2) bottom/100% 51% no-repeat}
.kx-stub svg{height:62px}
.ui.play .kx-shine{animation:kxShine 1.1s cubic-bezier(.4,0,.2,1) .3s both}
.ui.play .kx-stub{animation:kxTear .55s var(--out) 1.6s both}
.ui.play .kx-stamp{animation:kxStamp .4s cubic-bezier(.3,1.5,.5,1) 2s both}
@keyframes kxShine{from{transform:translateX(-120%) skewX(-16deg)}}
@keyframes kxTear{from{transform:none}}
@keyframes kxStamp{from{opacity:0;transform:rotate(-9deg) scale(1.9)}}
.js .ui:not(.play) .kx-stub{transform:none}
.js .ui:not(.play) .kx-stamp{opacity:0}

.kx-key{position:relative;width:min(100%,226px);aspect-ratio:200/120;color:#f4f4f2}
.kx-key svg{display:block;width:100%;height:100%;fill:#f4f4f2}
.ui.play .kx-key{animation:kxKey .6s var(--out) .15s both}
.js .ui:not(.play) .kx-key{opacity:0}
@keyframes kxKey{from{opacity:0;transform:translateY(8px)}}
.kx-status{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:500;color:#f4f4f2}
.kx-status i{width:8px;height:8px;border-radius:50%;background:#f4f4f2;box-shadow:0 0 0 4px #ffffff24}
.ui.play .kx-status i{animation:kxBlink .4s ease-in-out 3 alternate both}
@keyframes kxBlink{from{opacity:.25}}
.kx-status span,.kx-go{display:grid}
.kx-status b,.kx-go b{grid-area:1/1;font-weight:inherit;text-align:center}
.kx-status b:first-child,.kx-go b:first-child{opacity:0}
.ui.play .kx-status b:first-child{animation:kxOut .3s ease 1.3s reverse both}
.ui.play .kx-status b:last-child{animation:kxIn .3s ease 1.55s both}
.js .ui:not(.play) .kx-status b:first-child{opacity:1}
.js .ui:not(.play) .kx-status b:last-child{opacity:0}
.ui.play .kx-sat{animation:kxSat .5s cubic-bezier(.3,1.4,.5,1) var(--kd,1.6s) both}
.js .ui:not(.play) .kx-sat{opacity:0}
@keyframes kxSat{from{opacity:0;transform:translateY(8px) scale(.8)}}
@keyframes kxIn{from{opacity:0;transform:translateY(5px)}}
@keyframes kxOut{from{opacity:0}to{opacity:1}}

.kx-lock{color:#f4f4f2}
.kx-lock svg{display:block;width:50px;overflow:visible}
.kx-arc{transform-origin:46px 38px;transform:rotate(32deg) translateY(-3px)}
.ui.play .kx-arc{animation:kxOpen .6s cubic-bezier(.3,1.5,.5,1) 2s both}
.js .ui:not(.play) .kx-arc{transform:none}
@keyframes kxOpen{from{transform:none}}
.kx-code{display:flex;justify-content:center;gap:clamp(8px,3vw,14px);max-width:100%}
.kx-code span{display:flex;gap:4px}
.kx-code i{width:8px;height:8px;border-radius:50%;background:#f4f4f2}
.ui.play .kx-code i{animation:kxDot .28s cubic-bezier(.3,1.6,.5,1) calc(.3s + var(--n)*85ms) both}
.js .ui:not(.play) .kx-code i{background:#ffffff24}
@keyframes kxDot{from{background:#ffffff24;transform:scale(.6)}}
.ui.play .kx-go b:first-child{animation:kxOut .3s ease var(--go,2.2s) reverse both}
.ui.play .kx-go b:last-child{animation:kxIn .35s ease calc(var(--go,2.2s) + .22s) both}
.js .ui:not(.play) .kx-go b:first-child{opacity:1}
.js .ui:not(.play) .kx-go b:last-child{opacity:0}
.ui.play .kx-go{animation:kxPress .3s ease calc(var(--go,2.2s) - .15s)}
@keyframes kxPress{50%{transform:scale(.96)}}
@media (max-width:900px){
  .kx .kx-stage{flex:1;height:auto;margin:0}
}
@media (max-width:360px){
  .kx-stub{flex-basis:58px}
  .kx .ui-btn{padding-inline:2px;font-size:14px}
}
/* the other demos follow the same rule: base style is the last frame, .js .ui:not(.play) the first */
@keyframes axScan{from{transform:translateY(-100%)}}
@keyframes axLoad{0%{opacity:1;transform:scaleX(0)}88%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

@keyframes axHi{0%,100%{background:#f4f4f200}20%,80%{background:var(--hi,#f4f4f2);color:var(--hi-t,#0a0a0b)}}
@keyframes axOn{from{background:#f4f4f200;color:var(--ash)}}
@keyframes axType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2px 0 0)}}
@keyframes axPop{from{opacity:0;transform:scale(.7)}}


@keyframes axSpin{0%{opacity:1;transform:rotate(0)}85%{opacity:1}100%{opacity:0;transform:rotate(760deg)}}
@keyframes axFill{from{transform:scaleX(0)}}

.ui.play .ui-play::before{animation:axPulse 2.2s ease-out 1s infinite}
@keyframes axPulse{0%{opacity:.6;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.6)}}
.ui.play .ui-wave i{animation:axBar .5s var(--out) calc(var(--n)*16ms) both}
.ui.play .ui-wave i:nth-child(-n+20){animation:axBar .5s var(--out) calc(var(--n)*16ms) both,axBob 1.3s ease-in-out calc(1.1s + var(--n)*45ms) infinite alternate}
@keyframes axBar{from{transform:scaleY(.08)}}
@keyframes axBob{to{transform:scaleY(.62)}}
.js .ui:not(.play) .ui-wave i{transform:scaleY(.08)}

.ui.play .ui-top u{animation:axRow .9s var(--out) .35s both}
.ui.play .ui-top div:nth-child(2) u{animation-delay:.47s}
.ui.play .ui-top div:nth-child(3) u{animation-delay:.59s}
@keyframes axRow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.js .ui:not(.play) .ui-top u{clip-path:inset(0 100% 0 0)}
.js .ui:not(.play) .ui-chart i{transform:scaleY(.05)}

@keyframes axFlash{45%{background:var(--hi,#f4f4f2);color:var(--hi-t,#0a0a0b)}}
.ui.play .ui-log p.pop{animation:axMsg .4s var(--out) calc(.15s + var(--d,0s)*2.6) both}
@keyframes axMsg{from{opacity:0;transform:translateY(12px)}}
.js .ui:not(.play) .ui-log p.pop{opacity:0}
/* media demo: one real conversation with the bot across the three panels */
@keyframes mxType{0%{opacity:1;clip-path:inset(0 100% 0 0)}80%{opacity:1;clip-path:inset(0 0 0 0)}99%{opacity:1}100%{opacity:0}}
@keyframes mxDot{from{opacity:.25;transform:translateY(2px)}}
@media (max-width:900px){
}
/* desktop: wider margins, one panel size, solid readable cards */
@media (min-width:900.02px){
  :root{--gl:max(32px,4.4vw);--gr:max(32px,4.4vw);--ph:clamp(440px,52vh,500px)}
  .how>.feat,.how>.big,.work>*,.contact>*{max-width:1560px;margin-inline:auto}
  .work .big,.how .big,.contact .big{margin-bottom:clamp(28px,4vh,44px)}
  .feat,.feat.flip{gap:clamp(40px,6vw,120px);padding-block:clamp(40px,7vh,76px)}
  .feat .shots{height:calc(var(--ph) + 44px)}
  .feat .shots .ui{padding:22px 0}
  .ui-stack{width:min(100%,600px);height:var(--ph);display:flex;flex-direction:column}
  .ui-card{flex:1;min-height:0;padding:28px;background:linear-gradient(160deg,#1e1e1f,#0f0f10 60%);box-shadow:inset 0 1px 0 #ffffff3d,inset 0 0 0 1px #ffffff17,0 50px 90px -40px #000}
  .ui-sub+*,.ui-card>.ui-sub~:last-child{margin-top:auto}
  .ui-chart{flex:1;height:auto;min-height:0}
  .ui-cmds{flex:1;grid-auto-rows:1fr}
  .ui-log{flex:1;height:0;min-height:0}
  .kx .kx-stage{flex:1;height:auto;margin:0}
  .kx-ticket{width:min(100% - 24px,380px)}
  .kx-key{width:min(100%,300px)}
  .kx-lock svg{width:64px}
  .kx-code i{width:10px;height:10px}
  .f-text p{color:#b8b8b6}
  .feat .note{min-height:3.1em}
  .foot{width:calc(100% - var(--gl) - var(--gr));max-width:1560px;margin-inline:auto}
  .f-text h2,.f-text p,.who,.feat .step{text-shadow:0 0 14px var(--void),0 0 3px var(--void)}
  .row .in{height:clamp(400px,46vh,460px)}
  .tile{height:clamp(120px,18vh,170px)}
}
.fold{animation:fadeIn 1s ease .3s both}
@keyframes fadeIn{from{opacity:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}}

.hero{position:relative;display:flex;flex-direction:column;align-items:center;margin:0 auto;padding:clamp(88px,12vh,112px) var(--gr) clamp(30px,5vh,48px) var(--gl);overflow:visible;text-align:center}
h1{position:relative;z-index:0;margin:0;font:400 min(11vw,116px)/1 var(--disp);color:#f2f2ee;white-space:nowrap;text-align:center;letter-spacing:-.01em;animation:riseIn .5s var(--out) .1s both}
.bat{display:block;width:clamp(84px,8vw,118px);height:auto;margin-bottom:clamp(12px,2vh,18px);fill:#f2f2ee;animation:fadeIn .4s ease both}
.js .about{animation:fadeIn .4s ease .25s both}
.st{display:block;margin-top:8px;font-size:13px;font-weight:500;color:#f2f2ee}
@media (max-width:900px){
  html{scroll-padding-top:72px}
}
/* the two new demos */
@keyframes arGone{0%,45%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
/* Dela: brand and first headline only; everything else speaks Onest */
.big{margin-bottom:clamp(16px,2.6vh,26px);font:500 clamp(26px,3vw,44px)/1.1 var(--sans);text-transform:none;letter-spacing:-.035em}
@media (min-width:561px){.t-addr{white-space:nowrap;overflow-wrap:normal;font-size:clamp(18px,1.9vw,30px)}}
.nav nav{padding-inline:8px}
/* secret red mode */
.bat{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.bat.tick{animation:batTick .22s ease}
@keyframes batTick{50%{transform:scale(1.09)}}
.red-wave{position:fixed;inset:0;z-index:20;pointer-events:none;background:#e0102a;clip-path:circle(0 at var(--x) var(--y));animation:redWave .85s cubic-bezier(.3,0,.2,1) both}
.red-wave.off{background:#f2f2ee}
@keyframes redWave{60%{opacity:.9}100%{clip-path:circle(150vmax at var(--x) var(--y));opacity:0}}
.red{--hi:#e0102a;--hi-t:#fff;--pink:#e0102a;--rim:rgba(224,16,42,.3);--ash:#c9a9ad}
.red body{color:#fff0f1}
.red h1{color:#ff1f3a}
.red .bat{fill:#ff1f3a}
.red .big,.red .f-text h2,.red .h3{color:#fff}
.red .who,.red .st{color:#ff4057}
.red .feat .steps::before{background:#e0102a;box-shadow:0 -3px 12px #e0102a80}
.red .feat .step.on span{background:#e0102a;border-color:#e0102a;color:#fff}
.red .ui-btn.solid,.red .ui-sat,.red .ui-seg .on,.red .mx-msg.me,.red .ui-log .bot,.red .ui-cmds .hit,.red .feat .link{background:#e0102a;border-color:#e0102a;color:#fff;box-shadow:none}
.red .flood{background:#e0102a}
.red .ui-log .bot b{color:#ffd9de}
.red .ui-cmds button:hover,.red .ui-chips button:hover,.red .ui-chips button:active,.red .ui-cmds button:active{background:#e0102a;color:#fff}
.red .mx-bar b::after,.red .ui-input button::after,.red .ui-play::after{border-left-color:#fff}
.red .mx-ava i{background:#fff}
.red .in.act,.red .tile.act,.red .act .top,.red .act .line,.red .act .st{color:#fff}
.red .ui-chart i{background:linear-gradient(#e0102a,#e0102a40)}
.red .ui-wave i:nth-child(-n+20),.red .kx-code i,.red .ui-play,.red .mx-bar b,.red .ui-input button,.red .mx-ava{background:#e0102a}
.red .kx-key{color:#ff1f3a}
.red .kx-key svg{fill:#ff1f3a}
.red .kx-key .kx-cut{stroke:#101011}
.red .kx-ring{border-color:#e0102a}
.red .ui-top u,.red .vx-row u{background:linear-gradient(90deg,#e0102a calc(var(--v)*100%),#ffffff17 0)}
.red .nav nav{box-shadow:inset 0 1px 0 #e0102a66,inset 0 0 0 1px #e0102a33}
/* live status */
.live{display:block;margin:12px 0 0;text-align:center;text-wrap:balance;font-size:14px;color:#a8a8a6;font-variant-numeric:tabular-nums}
.live i,.has-live .st i{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#f2f2ee;box-shadow:0 0 0 0 #f2f2ee66;animation:livePing 2.4s ease-out infinite}
.st i{display:none}
.live.warn i,.has-live .down .st i{background:#777;animation:none;box-shadow:none}
@keyframes livePing{70%,100%{box-shadow:0 0 0 7px #f2f2ee00}}
.red .live i,.red.has-live .st i{background:#ff1f3a}
.live[hidden]{display:none}
.live i{margin-right:8px;vertical-align:.08em}
.in .st{display:flex;align-items:center;gap:8px}
html:not(.js) #clock{display:none}
/* design pass: a clear type scale, panels on the grid edge, fewer lines */
.big{font-size:clamp(34px,4.4vw,68px);line-height:1.02;letter-spacing:-.045em}
.how>.big+.feat{padding-top:clamp(12px,2.4vh,28px)}
.feat .step:not(:last-child)::after{display:none}
.feat .step{min-height:0}
.ui-card:has(.ui-seg)>.ui-sub~:last-child{margin-top:0}
@media (min-width:900.02px){
  .feat .shots .ui{justify-items:end}
  .feat.flip .shots .ui{justify-items:start}
  .ui-sat.tr{right:18px}
  .contact .big{margin-bottom:12px}
  .f-text h2{font-size:clamp(30px,2.9vw,46px);line-height:1.08}
  .feat .note{font-size:16px}
}
/* text stays readable when a bright crest passes under it */
.f-text>p:not(.who){color:#c6c6c4;text-shadow:0 0 12px var(--void),0 0 4px var(--void),0 1px 2px var(--void)}
@media (min-width:900.02px){
  .f-text{position:relative}
  .f-text::before{content:"";position:absolute;inset:-40px -64px;z-index:-1;background:radial-gradient(closest-side,#040404e6 55%,#04040400);pointer-events:none}
}
/* ?boost test */
/* ?boost: real depth on desktop only; phones get a single flat turn, written directly from main.js */
.sl{display:none}
@media (max-width:900px){
  .boost .feat .shots .ui,.boost .feat .shots .ui.on{transition:none;will-change:transform,opacity}
  .near .ui-stack h3,.near .ui-big,.near .kx-stage,.near .ui-video,.near .ui-btns,.near .ui-card>.ui-btn,.near .ui-chart{will-change:translate}
  .boost .ui-card{box-shadow:inset 0 1px 0 #ffffff47,inset 0 0 0 1px #ffffff1c,5px 6px 0 -1px #1b1b1d,5px 6px 0 0 #ffffff14,0 30px 50px -24px #000}
}
@media (min-width:900.02px){
  .boost .ui-stack,.boost .ui-card,.boost .mx-body,.boost .kx-stage{transform-style:preserve-3d}
  .boost .mx.ui-card{overflow:visible}
  .boost .ui-card h3,.boost .ui-big{translate:0 0 calc(var(--dp,0)*36px)}
  .boost .ui-sub,.boost .ui-tag,.boost .mx-head{translate:0 0 calc(var(--dp,0)*22px)}
  .boost .ui-chart,.boost .ui-cmds,.boost .ui-log,.boost .mx-msg,.boost .mx-audio,.boost .ui-video,.boost .vx-reel,.boost .ui-guest{translate:0 0 calc(var(--dp,0)*16px)}
  .boost .ui-top,.boost .ui-avas,.boost .vx-list,.boost .vx-row,.boost .mx-clip{translate:0 0 calc(var(--dp,0)*24px)}
  .boost .ui-linkbox,.boost .ui-seg,.boost .ui-input,.boost .mx-bar,.boost .ui-btns,.boost .ui-card>.ui-btn{translate:0 0 calc(var(--dp,0)*30px)}
  .boost .mx-msg.me,.boost .ui-chips{translate:0 0 calc(var(--dp,0)*34px)}
  .boost .kx-ticket,.boost .kx-key,.boost .kx-lock{translate:0 0 calc(var(--dp,0)*54px)}
  .boost .kx-code,.boost .kx-status{translate:0 0 calc(var(--dp,0)*30px)}
  .boost .ui-sat{translate:0 0 calc(24px + var(--dp,0)*40px)}
/* solid edge, brighter the further the card turns */
  .sl{display:none;position:absolute;inset:0;border-radius:20px;pointer-events:none;background:hsl(0 0% calc(10% + var(--z,0)*20%));transform:translateZ(calc(var(--n)*-11px))}
  .near .sl{display:block}
  .boost .ui-stack::before{content:"";position:absolute;inset:0;border-radius:20px;background:#0b0b0c;box-shadow:inset 0 0 0 1px #ffffff14;transform:translateZ(-44px);pointer-events:none}
/* the shadow slides away from the light */
  .boost .ui-stack::after{content:"";position:absolute;inset:6% 4% -4%;border-radius:20px;background:#000;filter:blur(26px);opacity:.75;transform:translate3d(calc(var(--sh,0)*-34px),18px,-70px);pointer-events:none}
/* a highlight runs along the rim and across the face */
  .boost .ui-card::before,.boost .ui-photo::before{content:"";position:absolute;inset:0;z-index:3;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:calc(.3 + var(--z,0)*.7);
    background:linear-gradient(calc(110deg + var(--sh,0)*70deg),#fff0 28%,#ffffffd0 50%,#fff0 72%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .boost .ui-card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,#fff0 34%,#ffffff1f 50%,#fff0 66%) calc(50% + var(--sh,0)*70%) 0/260% 100% no-repeat}
  .boost .feat .shots{perspective:1200px}
  .boost .feat .shots .ui{transform-style:preserve-3d;transform:translateX(calc(var(--s,1)*110px)) translateZ(-140px) rotateY(calc(var(--s,1)*-46deg));transition:opacity .4s ease,transform .95s cubic-bezier(.22,1.28,.36,1),visibility 0s .4s}
  .boost .feat .shots .ui.on{transform:none;transition:opacity .4s ease,transform .95s cubic-bezier(.22,1.28,.36,1)}
  .boost .ui-stack{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
}
/* offer: what the site is for, in the first screen and at the contacts */
/* the card leads to its demo: the fact stays, a small arrow says where */
.in .st::after{content:"↓";margin-left:auto;font-weight:400;font-size:14px;line-height:1}
/* card icons speak one line weight; the archiver is a bookmark, no longer a twin of the chat */
@media (max-width:560px){
}
@media (max-width:360px){.h3{font-size:22px}}
/* ?boost: now playing mock-up */
.now{display:none;margin-top:var(--sec);padding-inline:var(--gl) var(--gr)}
.boost .now{display:block}
.now-card{display:grid;grid-template-columns:clamp(120px,14vw,200px) minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(16px,1.8vw,24px);border-radius:20px;background:linear-gradient(160deg,#1e1e1f,#0f0f10 60%);box-shadow:inset 0 1px 0 #ffffff3d,inset 0 0 0 1px #ffffff17,0 50px 90px -40px #000}
.now-cover{aspect-ratio:1;border-radius:16px;background:radial-gradient(circle at 70% 25%,#0000 0 18%,#040404cc 70%),radial-gradient(circle,#f2f2ee 42%,#0000 46%) 0 0/8px 8px,#141415;box-shadow:inset 0 0 0 1px #ffffff1f}
.now-src{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ash)}
.now-src i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--pink)}
.now-title{margin-top:12px;font-size:clamp(26px,3vw,46px);font-weight:500;line-height:1.08;letter-spacing:-.035em;overflow-wrap:anywhere}
.now-artist{margin-top:6px;font-size:clamp(16px,1.4vw,20px);color:var(--ash)}
.now-eq{display:flex;align-items:center;justify-content:space-between;gap:2px;height:clamp(80px,10vw,132px);min-width:0}
.now-eq i{flex:1;max-width:4px;height:var(--h);border-radius:2px;background:currentColor;opacity:.9;animation:eq 1.7s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-73ms)}
@media (min-width:900.02px){.now>*{max-width:1560px;margin-inline:auto}.now .big{margin-bottom:clamp(28px,4vh,44px)}}
@media (max-width:900px){
  .now-card{grid-template-columns:96px minmax(0,1fr);gap:14px 16px;border-radius:20px}
  .now-eq{grid-column:1/-1;height:56px}
  .now-src{font-size:13px}
}
.red .now-eq i{background:#e0102a}
/* critique pass: readable sizes, offer before the name, calm ground under text */
.about{font-size:clamp(17px,1.5vw,20px)}
.ui-log p b,.mx-head small,.ui-tag,.mx-audio .ui-times{font-size:13px}
.feat .note{font-size:16px}
@media (max-width:900px){
  .work{margin-top:28px}
  .hero{padding-bottom:20px}
  .feat{position:relative}
  .feat::before{content:"";position:absolute;inset:0 calc(-1*var(--gr)) auto calc(-1*var(--gl));height:300px;z-index:-1;background:linear-gradient(#040404d9 72%,#04040400);pointer-events:none}
  .feat .note{text-shadow:0 0 10px var(--void),0 0 3px var(--void)}
}
@media (min-width:900.02px){.tiles{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
/* ?boost: panels as proof, action and result in one frame */
.ar2.ui-card{justify-content:space-between}
.ar2.ui-card{justify-content:center;gap:22px}
/* ?boost: three voices. Dela is the brand, Onest speaks, the mono labels and names what belongs to the machine */
@font-face{font-family:Mono;src:url(fonts/mono-latin.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193}
@font-face{font-family:Mono;src:url(fonts/mono-cyr.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
.boost{--mono:Mono,ui-monospace,Menlo,Consolas,monospace}
.boost .who{font:500 14px/1.3 var(--mono);letter-spacing:.01em}
.boost .h3{font-family:var(--mono);font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.03em}
.boost .top,.boost .st,.boost .now-src{font-family:var(--mono);font-size:13px}
.boost .feat .step{font:500 13px/1.4 var(--mono)}
.boost .feat .step span{font-family:var(--mono)}
@media (max-width:900px){.boost .h3{font-size:20px}}
@media (max-width:360px){.boost .h3{font-size:18px}.boost .feat .step{font-size:12px;letter-spacing:-.01em}.mx-sent{font-size:13px}}
/* each demo gets its own breath: one finishes, then a pause, then the next */
.how>.feat,.how>.feat.flip{padding-block:clamp(84px,13vh,140px)}
.how>.big+.feat{padding-top:clamp(12px,2.4vh,28px)}
@media (max-width:900px){
  .how>.feat,.how>.feat.flip{padding-block:76px}
  .how>.big+.feat{padding-top:20px}
  .feat::before{height:390px}
}
.in .st.no-demo::after{display:none}

/* section headings: tall condensed caps, nothing else on the page looks like them */
@font-face{font-family:Head;src:url(fonts/head-latin.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0021-00FF}
@font-face{font-family:Head;src:url(fonts/head-cyr.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
.big{font:700 clamp(58px,8.4vw,132px)/.92 Head,var(--sans);letter-spacing:0;text-transform:uppercase}
.big .ch{display:inline-block;overflow:clip;overflow-clip-margin:.06em;vertical-align:top}
.big .ch>b{display:inline-block;font-weight:inherit}
.js .big.ready .ch>b{transform:translateY(104%);transition:transform .8s var(--out);transition-delay:calc(var(--c)*28ms)}
.js .big.ready.in-v .ch>b{transform:none}

/* project marks: one solid emblem on a patch of the site's halftone */
.art{display:grid;place-items:center}
.art::before{content:"";position:absolute;inset:-6% 0;background:radial-gradient(circle,currentColor 1.1px,#0000 1.5px) 50% 50%/9px 9px;opacity:.26;-webkit-mask:radial-gradient(closest-side,#000 18%,#0000 100%);mask:radial-gradient(closest-side,#000 18%,#0000 100%);transition:opacity .5s,scale .9s var(--out)}
.act .art::before{opacity:.42;scale:1.12}
.art svg{position:absolute;inset:0;margin:auto;width:auto;height:100%;max-height:150px;aspect-ratio:1;overflow:visible;transition:scale .7s var(--out)}
.act .art svg{scale:1.07}
.e-fill{fill:currentColor}
.e-sh,.e-bar,.e-end,.e-key,.e-ring{transform-box:fill-box}
/* files: sheets peek out of the folder */
.e-sh{fill:currentColor;transition:transform .7s var(--out)}
/* media: the disc plays, rays follow the sound */
.e-ray{fill:currentColor}
/* bookmark: a prompt carved out of it */
/* chat: bars carved out of the bubble */
/* vod: one record, three directions */
.e-line{fill:none;stroke:currentColor;stroke-width:3;opacity:.34}
/* key: a glint runs round the bow */
.e-key{transform-origin:21% 50%;transition:transform .8s var(--out)}

/* the card's list arrives line by line, its arrow nods */
.mi span{opacity:0;translate:0 8px;transition:opacity .4s,translate .5s var(--out)}
.act .mi span{opacity:1;translate:none;transition-delay:calc(var(--m,0)*70ms + .12s)}
.mi span:nth-child(2){--m:1}.mi span:nth-child(3){--m:2}
.in .st::after{transition:translate .4s var(--out)}
.act .st::after{animation:eNod 1.1s ease-in-out infinite}
@keyframes eNod{50%{translate:0 4px}}

/* arrows leave through the corner and come back */
@keyframes eOut{0%{translate:0 0;opacity:1}49%{translate:12px -12px;opacity:0}50%{translate:-12px 12px;opacity:0}100%{translate:0 0;opacity:1}}
/* contact marks answer the pointer */
.mark{transition:rotate .6s var(--out),scale .6s var(--out)}
.act .mark{rotate:-8deg;scale:1.08}

.js .about{animation:riseIn .7s var(--out) both}
.js .about{animation-delay:.35s}
/* the tiny things */
.bat{transition:scale .35s var(--out),rotate .35s var(--out)}
@media (hover:hover){.bat:hover{scale:1.05;rotate:-2deg}}
.f-brand svg{transition:rotate .5s var(--out)}
@media (hover:hover){.f-brand:hover svg{rotate:-10deg}}
.feat .step span{transition:translate .35s var(--out)}
@media (hover:hover){.feat .step:hover span{translate:3px 0}}
.who{transition:letter-spacing .6s var(--out)}
/* a rule draws itself between two demos */
.feat{position:relative}
.feat+.feat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#ffffff24;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--out)}
.feat.ruled+.feat::after,.feat+.feat.ruled::after{transform:none}
.feat.flip+.feat::after,.feat+.feat.flip::after{transform-origin:right}
/* the headline of each demo comes up word by word */
.f-text h2 .w{display:inline-block;overflow:clip;overflow-clip-margin:.14em;vertical-align:top}
.f-text h2 .w>b{display:inline-block;font-weight:inherit}
.js .f-text h2.ready .w>b{transform:translateY(112%);transition:transform .75s var(--out);transition-delay:calc(var(--c)*55ms)}
.js .f-text h2.ready.in-v .w>b{transform:none}
/* nav: one pill slides between the links */
.nav nav{position:relative}
.nav a{position:relative;z-index:1}
.nav-pill{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:99px;background:rgba(255,255,255,.13);opacity:0;transition:transform .5s var(--out),width .5s var(--out),opacity .3s;pointer-events:none}
@media (hover:hover){.nav a:hover{background:none}}
.nav a:active{background:none}
.nav a.cur{color:#fff}
@media (prefers-reduced-motion:reduce){
  .big .ch>b,.f-text h2 .w>b{transform:none!important;opacity:1;translate:none}
}
.feat .link::after{transition:none}
@media (hover:hover){.feat .link:hover::after,.act .arr{animation:eOut .46s var(--out)}}
/* logo and name give off the same soft light */
h1{text-shadow:0 0 7px #ffffff4d,0 0 24px #ffffff24}
.red h1{text-shadow:0 0 7px #ff1f3a66,0 0 24px #ff1f3a33}
.bat{filter:drop-shadow(0 0 7px #ffffff4d) drop-shadow(0 0 24px #ffffff24)}
.red .bat{filter:drop-shadow(0 0 7px #ff1f3a66) drop-shadow(0 0 24px #ff1f3a33)}
/* a tilted card dips behind the plane of its panel; the panel must not catch clicks meant for the card */
@media (min-width:900.02px){.feat .shots .ui{pointer-events:none}.feat .shots .ui.on .ui-stack{pointer-events:auto}}
/* touch: small links keep their look, the finger gets a bigger target */
.f-brand{position:relative}
.ui-chips button{position:relative}
@media (pointer:coarse){
  .nav a::after,.f-brand::after,.ui-chips button::after{content:"";position:absolute;inset:-10px 0}
  .ui-chips button::after{inset:-5px 0}
}


/* ===== unslop pass: quiet chrome, one language of dots ===== */
/* surfaces: flat steps and hairlines, no glass and no sheen */
.sky i,.grain{display:none}
.in,.tile{background:#0d0d0e;box-shadow:inset 0 0 0 1px #ffffff14;-webkit-backdrop-filter:none;backdrop-filter:none}
.ui-card,.boost .ui-card{background:#111112;box-shadow:inset 0 0 0 1px #ffffff17,0 32px 56px -32px #000;-webkit-backdrop-filter:none;backdrop-filter:none}
.boost .ui-card::after{display:none}
.boost .ui-card::before,.boost .ui-photo::before{opacity:calc(var(--z,0)*.7)}
.nav nav{box-shadow:inset 0 0 0 1px #ffffff14}
/* fonts: Dela for the name, Head for sections, Onest for reading; Mono only for names of things and numbers */
.boost .top,.boost .st,.boost .now-src,.boost .feat .step{font-family:var(--sans);font-size:14px}
.boost .feat .step{font-weight:500}
.boost .feat .step span{font-size:13px}
.ui-big,.vx-row em,.ui-top em{font-variant-numeric:tabular-nums}
/* rhythm: two rows of three, the widths run opposite ways */
@media (min-width:900.02px){
  .row{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
  .row>:nth-child(1),.row>:nth-child(6){grid-column:span 5}
  .row>:nth-child(2),.row>:nth-child(5){grid-column:span 4}
  .row>:nth-child(3),.row>:nth-child(4){grid-column:span 3}
}
.tiles{gap:12px}
.art::before{display:none}
.art svg,.act .art svg{scale:1;transition:none}
.act .st::after,.now-eq i,.ui-tag i{animation:none!important}
.e-ray{opacity:.8}
/* one easing, small moves */
.act .mark{rotate:none;scale:1}

/* ===== one heading voice: Head for every title, Onest for reading, Mono only for small names ===== */
.head{display:grid;gap:12px;margin-bottom:clamp(28px,4vh,44px);padding-bottom:36px;border-bottom:1px solid #ffffff1f}
.big{position:relative;z-index:0;margin:0;font-size:clamp(84px,14.5vw,232px);line-height:.86}
.big.ht{color:transparent}
.big-dots{position:absolute;left:0;top:0;pointer-events:none}
.lead{max-width:32em;font-size:16px;line-height:1.5;color:var(--ash)}
@media (min-width:900.02px){
  .how>.head,.work>.head,.contact>.head{max-width:1560px;margin-inline:auto}
  .head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px}
  .lead{padding-bottom:8px;text-align:right}
}
.how>.head+.feat{padding-top:clamp(20px,3vh,32px)}
.line{min-height:2.8em}
.boost .now{display:none}
@media (max-width:900px){
  .line{min-height:0}
  .lead{font-size:15px}
}
/* surfaces stay solid, so nothing shows through a card */
.in,.tile{background:#0c0c0d;box-shadow:inset 0 1px 0 #ffffff24,inset 0 0 0 1px #ffffff14,0 24px 48px -24px #000}
.feat .shots .ui-card,.boost .ui-card{box-shadow:inset 0 1px 0 #ffffff24,inset 0 0 0 1px #ffffff17,0 32px 56px -28px #000}
@media (min-width:900.02px) and (hover:hover){
  .in,.tile{transform-origin:50% 100%}
  .boost .feat{--rest:-3deg}
  .boost .feat.flip{--rest:3deg}
  .boost .ui-stack{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--rest,0deg)))}
}
/* the name gets the first screen alone; projects arrive after a scroll */
.work{margin-top:clamp(96px,16vh,168px)}
.contact .big{font:500 clamp(34px,4.4vw,68px)/1.02 var(--sans);letter-spacing:-.045em;text-transform:none}
@media (max-width:900px){.work{margin-top:72px}}
/* under the name: a few words, then the projects as a row of marks */
.under{box-sizing:border-box;width:100%;max-width:1200px;margin:clamp(16px,3vh,32px) auto 0;padding-inline:var(--gl) var(--gr)}
.u-text{max-width:30em;margin:0 auto;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#d6d6d4;text-align:center;text-wrap:balance;text-shadow:0 0 12px var(--void),0 0 4px var(--void)}
.u-cap{margin-top:clamp(20px,3.4vh,32px);font-size:14px;color:var(--ash);text-align:center}
.u-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(20px,3.4vw,48px);margin:12px 0 0;padding:0;list-style:none}
.u-icons li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:#e4e4e2}
.u-icons svg{width:24px;height:24px;flex:none}
@media (max-width:900px){.u-icons{gap:12px 24px}.u-icons li{font-size:14px}.u-icons svg{width:20px;height:20px}}
.u-icons{max-width:920px;margin-inline:auto}
@media (max-width:900px){.work{margin-top:184px}}
/* stack: a dense quiet block; section heads carry only the title */
.u-cap{display:none}
.u-icons{max-width:1080px;margin-top:clamp(20px,3.4vh,32px);gap:12px 24px}
.u-icons li{gap:8px;min-height:24px;font-size:14px}
.u-icons svg{width:20px;height:20px}
.how .big{white-space:nowrap;font-size:min(clamp(84px,14.5vw,232px),calc((100vw - 48px)/4.5))}
@media (min-width:900.02px){.head{display:block}}
@media (max-width:900px){.u-icons{gap:8px 16px}.u-icons li{font-size:13px}.work{margin-top:max(160px,calc(100svh - 620px))}}
.ic-pil{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFoklEQVR42uWbS2hcVRjHf+fMbe0DH61RqW+p1aYg1lLEulIq1kcFUy0FEcGFLoq4E7e60Y07F4q6UQSpVVR8FEFRUcGg+KglRd1oAyI2pk1ibZvMzOfifF9yejN38rh3Hpn7wSW5M3PPPd//fO/zHSciFEQVoBbd9wHXAdcDm4CrgEuBtcDZwHJ9RvS5U8A48A8wDPwODAHfA98BUxnvyUWuIABsUmcBA8BuYBuwroCx6wrEG8CLwGihIIhI3quif7eLyEGZTVW9aiJS1yuL6vq7WvRMTEdEZCD13lxXXgnwukL3AftSK+MBV5Ck1vVK9P5x4PkiJCEPAF719zLgkOp1NZok+n1RIBgQoozvAt7JC4LPufoCPKbMT6WYryvzUiAAPhrzBeD86D1tBcAp6g64PVqV9NijBUuAjVsDLgIeznh3WyRA1KVdrky6aOUBngM2Ag8Bk9HnhXgvff+9el9rtw0w47deXdTySNSd2oJ1wIh+NgT06zO+AADMtvwFXANMLFbd8k4mSY3hImu9F1itq3RlCwwiwCpgZSe8gEnAteoBkgwGhzX6cwUDYGONAxuAvxcrAQmtI3ORsXR0HfkWju0iv921lMyTEZdaQfPHlQ4CHOchlSYq0HQRknkEHbUGA5jbOd7hBRTg2DzcoGWd9fkA4KJgA3Vx61WfV6fE+5IO6/YyYA8w1mAedXXDv0TueFbYnPYCsRj1A48AdysAFZYmjQAHgGeBw2kQYgCMeQ88BTwBrJhDl1yb9LwZ1eahxgD/Ao9qXWEaBAPAjNxyYD+wUx+qRoO4JSoBVnEydd8JfGggGACGyFua21tmt1SZzpIUDxzVUt1RwPmI+b0R88t6jPl4kS8EnrRo0omIA9aotVzbRv/dKXUw9301MGpFjT2EKq70MPOx+16j3m2a2V3dHrIWLAUC3GUAXABs7hKX1q78xwE3Aiu9Mt/Xony9W9UArWRt8sDWVCmrDABY0WaLJ2xdlY3M3t3gCTU1SiL+aTXY6DWjKysAVzgROUXY1CwjTTgRqZds9c/ID3yJrH/DmMADJ0sMQNUTOjIoUSgc8zrugT9KDMCfnlAnKysAQx74oYRxgNGgJ3RgVUuSCRpVlOfPPWHr+kiJEiLj8RBw0NzgN2TsnPQwAO9ZIATwNku79L0Y8d8HM9WRA4TOzF6PDKvK7yfq/byVxU8CTzOzGdrr9Ix5Pq+oVIBXgfcJewKTPcj0JKEK9BrwJamdIdP/c4CPCH2+tqXkM+IE6RK7ITSuZ0rq+0RjnlsJTVUCiE/9+Dih7+9lvbcmqHh/0C5PdxhN12R+puIJYT9wB2ErfZrnZtvjW4EHgJuBi5ndSyCqLn0dBEIIDVK1DAkYA35Si/+upcCxoW/UJWYIxt5gFWd2gtn3G4BBsrvEWsm4U1HeTNjo9Kl8RoATER+uUc6TNNEpE6Ea8F/GRMa7QP/HFIhmfp8s75bMETHVMwygiVHSBTYgiaSyUUZbm+vhhaSPaSlpdQpti1Bpol6SsvgLRq+bc3bf6izVdzHzTg3sS5GOSyv0p4jKStFi74HfgO1qyT9VV5b2NLnV0OdkfKSFnmBCmYfQdN3o/cfyvt/n1M9R4MeCawnmz7cQjsk9CLzSQEqEcKbwNDOdoAsPI3Mcmko0kdoNvMlMc1W70toEuAP4mBwHp3zOSXhCa90HLcoia3rVG2R1+5V5TweOzJAKkM7VospNUVzuWwCGRXZfEXp8TuQ1hHknGWeRO4DXdYIWKVZz2AaJxrCTYVa3uDNOafNxUMDxUxHx0f8DIjLY4FhsLXWENuvYbKMjsyIiX4vIPdF7XDccnW2WRd4G3A/colnjQqVtCvgV+EztzBcpL1HIxIsEIM6+YqO0gtCHtE1rDP2Eg1TnMXPc7rS61GHCPsW3hFL9z6oCWWPnpv8BJdZQ3mwJwX0AAAAASUVORK5CYII=) center/contain no-repeat;mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFoklEQVR42uWbS2hcVRjHf+fMbe0DH61RqW+p1aYg1lLEulIq1kcFUy0FEcGFLoq4E7e60Y07F4q6UQSpVVR8FEFRUcGg+KglRd1oAyI2pk1ibZvMzOfifF9yejN38rh3Hpn7wSW5M3PPPd//fO/zHSciFEQVoBbd9wHXAdcDm4CrgEuBtcDZwHJ9RvS5U8A48A8wDPwODAHfA98BUxnvyUWuIABsUmcBA8BuYBuwroCx6wrEG8CLwGihIIhI3quif7eLyEGZTVW9aiJS1yuL6vq7WvRMTEdEZCD13lxXXgnwukL3AftSK+MBV5Ck1vVK9P5x4PkiJCEPAF719zLgkOp1NZok+n1RIBgQoozvAt7JC4LPufoCPKbMT6WYryvzUiAAPhrzBeD86D1tBcAp6g64PVqV9NijBUuAjVsDLgIeznh3WyRA1KVdrky6aOUBngM2Ag8Bk9HnhXgvff+9el9rtw0w47deXdTySNSd2oJ1wIh+NgT06zO+AADMtvwFXANMLFbd8k4mSY3hImu9F1itq3RlCwwiwCpgZSe8gEnAteoBkgwGhzX6cwUDYGONAxuAvxcrAQmtI3ORsXR0HfkWju0iv921lMyTEZdaQfPHlQ4CHOchlSYq0HQRknkEHbUGA5jbOd7hBRTg2DzcoGWd9fkA4KJgA3Vx61WfV6fE+5IO6/YyYA8w1mAedXXDv0TueFbYnPYCsRj1A48AdysAFZYmjQAHgGeBw2kQYgCMeQ88BTwBrJhDl1yb9LwZ1eahxgD/Ao9qXWEaBAPAjNxyYD+wUx+qRoO4JSoBVnEydd8JfGggGACGyFua21tmt1SZzpIUDxzVUt1RwPmI+b0R88t6jPl4kS8EnrRo0omIA9aotVzbRv/dKXUw9301MGpFjT2EKq70MPOx+16j3m2a2V3dHrIWLAUC3GUAXABs7hKX1q78xwE3Aiu9Mt/Xony9W9UArWRt8sDWVCmrDABY0WaLJ2xdlY3M3t3gCTU1SiL+aTXY6DWjKysAVzgROUXY1CwjTTgRqZds9c/ID3yJrH/DmMADJ0sMQNUTOjIoUSgc8zrugT9KDMCfnlAnKysAQx74oYRxgNGgJ3RgVUuSCRpVlOfPPWHr+kiJEiLj8RBw0NzgN2TsnPQwAO9ZIATwNku79L0Y8d8HM9WRA4TOzF6PDKvK7yfq/byVxU8CTzOzGdrr9Ix5Pq+oVIBXgfcJewKTPcj0JKEK9BrwJamdIdP/c4CPCH2+tqXkM+IE6RK7ITSuZ0rq+0RjnlsJTVUCiE/9+Dih7+9lvbcmqHh/0C5PdxhN12R+puIJYT9wB2ErfZrnZtvjW4EHgJuBi5ndSyCqLn0dBEIIDVK1DAkYA35Si/+upcCxoW/UJWYIxt5gFWd2gtn3G4BBsrvEWsm4U1HeTNjo9Kl8RoATER+uUc6TNNEpE6Ea8F/GRMa7QP/HFIhmfp8s75bMETHVMwygiVHSBTYgiaSyUUZbm+vhhaSPaSlpdQpti1Bpol6SsvgLRq+bc3bf6izVdzHzTg3sS5GOSyv0p4jKStFi74HfgO1qyT9VV5b2NLnV0OdkfKSFnmBCmYfQdN3o/cfyvt/n1M9R4MeCawnmz7cQjsk9CLzSQEqEcKbwNDOdoAsPI3Mcmko0kdoNvMlMc1W70toEuAP4mBwHp3zOSXhCa90HLcoia3rVG2R1+5V5TweOzJAKkM7VospNUVzuWwCGRXZfEXp8TuQ1hHknGWeRO4DXdYIWKVZz2AaJxrCTYVa3uDNOafNxUMDxUxHx0f8DIjLY4FhsLXWENuvYbKMjsyIiX4vIPdF7XDccnW2WRd4G3A/colnjQqVtCvgV+EztzBcpL1HIxIsEIM6+YqO0gtCHtE1rDP2Eg1TnMXPc7rS61GHCPsW3hFL9z6oCWWPnpv8BJdZQ3mwJwX0AAAAASUVORK5CYII=) center/contain no-repeat}
.work .big,.how .big{text-align:center}
/* ===== owner pass: calmer rhythm, one alignment, fewer lines ===== */
.head{margin-bottom:clamp(24px,3.4vh,36px);padding-bottom:0;border-bottom:0}
.contact .big{text-align:center}
.how>.feat,.how>.feat.flip{padding-block:clamp(56px,8vh,88px)}
.how>.head+.feat{padding-top:clamp(8px,1.6vh,16px)}
.contact{margin-top:clamp(56px,9vh,96px)}
.foot{margin-top:clamp(56px,9vh,96px)}
/* the demo reel shows frames of a real clip, not empty boxes */
.nav{transition:translate .35s var(--out)}
@media (max-width:900px){
  .nav.away{translate:0 calc(-100% - 32px)}
  .how>.feat,.how>.feat.flip{padding-block:48px}
  .how>.head+.feat{padding-top:8px}
  .feat::before{background:linear-gradient(#04040400,#040404d9 56px,#040404d9 72%,#04040400)}
  .feat .notes{text-align:left}
  .feat .note{text-wrap:pretty}
}
@media (max-width:560px){
  .u-icons{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px 12px}
}
@media (prefers-reduced-motion:reduce){.nav.away{translate:none}}
/* ===== finish pass: flat controls, quieter chrome, one clear lead per screen ===== */
/* surfaces lift off the black by one step */
.in,.tile{background:#101011;box-shadow:inset 0 0 0 1px #ffffff1a,0 24px 48px -24px #000}
.feat .shots .ui-card,.boost .ui-card{background:#141415;box-shadow:inset 0 0 0 1px #ffffff1c,0 32px 56px -28px #000}
/* the action is flat: colour says it, not a gradient and a lift */
.feat .link{gap:16px;padding:12px 16px;border:0;border-radius:12px;background:#f4f4f2;box-shadow:none;transition:background .2s}
.feat .link:hover{transform:none;background:#fff;box-shadow:none}
@media (hover:none){.feat .link:hover{box-shadow:none}}
/* steps: a number and a word; the line under them is the only indicator */
.feat .steps{margin-top:28px;padding-bottom:0}
.feat .step{flex-direction:row;align-items:baseline;gap:8px;padding:12px 4px 16px 0;border-radius:0}
.feat .step:hover{background:none}
.feat .step span,.feat .step.on span,.red .feat .step.on span{display:inline;width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font-size:12px;opacity:.7}
.feat .step:hover span{translate:none}
.feat .steps::before{box-shadow:none}
.feat .notes{margin-top:16px}
/* text column: label quieter, headline less cramped */
.who{margin-bottom:12px;color:var(--ash)}
.feat .f-text h2{letter-spacing:-.03em;line-height:1.1}
.f-text>p:not(.who){margin-top:16px}
/* the stack supports the name, it does not compete with it */
.u-icons li{color:#a4a4a2;font-weight:400}
/* contacts: what it is first, the address under it */
.tile{height:auto;min-height:104px;padding:20px 24px;gap:20px}
.mark{width:40px;height:40px}
.t-addr small{display:block;margin-bottom:4px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--ash);transition:color .45s}
.act .t-addr small{color:#4a4856}
.t-addr{font-size:clamp(20px,1.7vw,24px)}
@media (min-width:900.02px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .feat .step{flex-direction:column;align-items:center;gap:2px;padding:8px 4px 12px}
  .feat .step span{background:none}
}
@media (max-width:560px){.tile{height:auto;min-height:80px;padding:16px;gap:16px}.mark{width:32px;height:32px}.t-addr{font-size:18px}}
@media (max-width:900px){.tiles{grid-template-columns:minmax(0,1fr);gap:12px}}
/* ===== 2. gothchat leads the demos, wide; the rest stay compact ===== */
@media (min-width:900.02px){
  .feat{--ph:clamp(400px,46vh,440px)}
}
/* the first screen is one block: mark, name, role, a few words, the stack */
.hero{padding-bottom:0}
.under{margin-top:clamp(28px,5vh,48px)}
.work{margin-top:clamp(120px,22vh,216px)}
@media (max-width:900px){.work{margin-top:max(120px,calc(100svh - 620px))}}
@media (min-width:900.02px){
  :root{--first:max(96px,calc((100svh - 486px)/2))}
  .hero{padding-top:var(--first)}
  .work{margin-top:calc(var(--first) + 24px)}
}
/* contacts are two links, not boxes: a mark, a name, an address, a line between them */
.tiles{display:block;max-width:800px;margin-inline:auto;border-top:1px solid #ffffff24}
.tile{display:flex;min-height:0;padding:24px 16px;gap:24px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid #ffffff24;transform:none!important;backdrop-filter:none;-webkit-backdrop-filter:none}
.tile .mark{width:40px;height:40px}
.t-addr{font-size:clamp(24px,2.6vw,36px);letter-spacing:-.02em}
.tile .arr{width:24px;height:24px}
@media (max-width:900px){.tile{background:none;padding:20px 8px;gap:16px}.tile .mark{width:32px;height:32px}.t-addr{font-size:22px}.tiles{max-width:none}}
@media (max-width:360px){.t-addr{font-size:19px}}
/* demo cards: near-black body and a clear edge, no title bar */
.feat .shots .ui-card,.boost .ui-card{background:#08080a;box-shadow:inset 0 0 0 1px #ffffff2e,0 32px 64px -24px #000}
/* a plain picture behind the first screen; its black background melts into the page */
.hero-fig{position:absolute;z-index:-1;top:64px;left:calc(50% + 200px);width:auto;height:min(82vh,740px);max-width:none;mix-blend-mode:screen;pointer-events:none;-webkit-mask:linear-gradient(90deg,#0000 2%,#000 22%),linear-gradient(#000 56%,#0000 80%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#0000 2%,#000 22%),linear-gradient(#000 56%,#0000 80%);mask-composite:intersect;animation:fadeIn .6s ease .3s both}
main{overflow-x:clip}
.about,.under{text-shadow:0 0 12px var(--void),0 0 4px var(--void)}
@media (max-width:900px){.hero-fig{left:calc(50% - 28px);top:64px;height:340px;opacity:.72;-webkit-mask:linear-gradient(90deg,#0000 4%,#000 28%),linear-gradient(#000 46%,#0000 70%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#0000 4%,#000 28%),linear-gradient(#000 46%,#0000 70%);mask-composite:intersect}}
/* first screen: mark and name as one logo with the text on the left, the figure alone on the right */
.brand{--ns:min(4.7vw,76px);display:flex;align-items:center;gap:calc(var(--ns)*.28)}
.brand .bat{flex:none;width:calc(var(--ns)*1.3);margin:0}
h1{font-size:var(--ns);text-align:left}
@media (min-width:900.02px){
  .hero{align-items:flex-start;text-align:left;padding-left:max(var(--gl),calc((100vw - 1560px)/2))}
  .about{text-align:left}
  .under{margin-left:max(var(--gl),calc((100vw - 1560px)/2));padding:0;max-width:min(48vw,640px)}
  .u-text{margin:0;text-align:left}
  .u-icons{justify-content:flex-start}
  .hero-fig{left:auto;right:-40px;top:56px;height:min(88vh,800px);-webkit-mask:linear-gradient(#000 60%,#0000 86%);mask:linear-gradient(#000 60%,#0000 86%)}
}
@media (max-width:900px){
  .brand{--ns:calc((100vw - 2*var(--gl))/9.5)}
  .hero{padding-top:72px}
  .hero-fig{position:static;order:-1;width:100%;height:auto;max-width:360px;margin-bottom:-48px;opacity:1;-webkit-mask:linear-gradient(#000 62%,#0000 96%);mask:linear-gradient(#000 62%,#0000 96%)}
}
@media (min-width:900.02px){.work{margin-top:calc(var(--first) + 176px)}}
.fog{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* Quiet silver artwork, with a soft lower edge so the name remains the brightest element. */
.hero-fig{mix-blend-mode:screen;object-fit:contain;opacity:.78;filter:brightness(.88);-webkit-mask:linear-gradient(#000 76%,#000c 93%,#0005);mask:linear-gradient(#000 76%,#000c 93%,#0005)}
@media (min-width:900.02px){.hero-fig{left:auto;right:clamp(12px,3vw,56px);top:68px;width:min(50vw,82svh,740px);height:auto}}
@media (max-width:900px){.hero-fig{width:min(100%,310px);height:auto;max-width:310px;margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){.hero-fig{animation:none}}
/* the drawing belongs to the site: same ink as the name, same light as the logo, its foot breaks into the page's dots */
.hero-fig{mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 0 7px #ffffff33) drop-shadow(0 0 24px #ffffff1c);-webkit-mask:none;mask:none}
@media (min-width:900.02px){.hero-fig{right:clamp(0px,2vw,40px);top:60px;width:min(46vw,80svh,700px)}}
.red .hero-fig{filter:drop-shadow(0 0 7px #ff1f3a55) drop-shadow(0 0 24px #ff1f3a2b)}
/* the mark signs the name from below: small, between two hairlines the width of the word */
.brand{--ns:min(5.4vw,84px);display:inline-flex;flex-direction:column;align-items:stretch;gap:calc(var(--ns)*.2)}
.b-mark{display:flex;align-items:center;gap:calc(var(--ns)*.24)}
.b-mark::before,.b-mark::after{content:"";flex:1;height:1px;background:#ffffff40}
.brand .bat{width:calc(var(--ns)*.5);margin:0;filter:drop-shadow(0 0 5px #ffffff40)}
@media (max-width:900px){.brand{--ns:calc((100vw - 2*var(--gl))/8.15)}}
/* the drawing as a scene: a thin moon behind her, mist at her feet, a rare glint along the blade */
.hero-art{--ink:url(media/hero-mark.webp?v=7);position:absolute;z-index:-1;pointer-events:none;aspect-ratio:1;animation:fadeIn .6s ease .2s both}
.hero-art .hero-fig,.hero-art .hero-fig{position:relative;inset:auto;left:auto;right:auto;top:auto;order:0;display:block;width:100%;height:100%;max-width:none;margin:0;animation:none}
.hero-art::before{content:"";position:absolute;left:21%;top:1%;width:66%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 38%,#ffffff17,#ffffff08 58%,#ffffff03 72%);box-shadow:inset 0 0 0 1px #ffffff2b,0 0 90px #ffffff0f}
.hero-art i,.hero-art{--x:0}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,#fff0 42%,#ffffffd9 50%,#fff0 58%) 160% 0/260% 100% no-repeat;-webkit-mask:var(--ink) center/contain no-repeat;mask:var(--ink) center/contain no-repeat;animation:bladeGlint 9s var(--out) 2s infinite}
@keyframes bladeGlint{0%,62%{background-position:160% 0}100%{background-position:-60% 0}}
@media (min-width:900.02px){.hero-art{right:clamp(0px,2vw,40px);top:60px;width:min(46vw,80svh,700px)}}
@media (max-width:900px){.hero-art{position:relative;order:-1;width:min(100%,310px);margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){.hero-art::after{animation:none;opacity:0}}
/* no moon: light runs up the scythe only, then the tip of the blade catches it */
.hero-art::before{left:calc(6% - 26px);top:calc(33% - 26px);width:52px;height:52px;aspect-ratio:auto;border-radius:0;box-shadow:none;background:radial-gradient(circle,#fff 0 8%,#fff0 60%);clip-path:polygon(50% 0,54% 46%,100% 50%,54% 54%,50% 100%,46% 54%,0 50%,46% 46%);opacity:0;animation:tipFlash 7s ease-out 2s infinite}
.hero-art::after{inset:0;background:linear-gradient(135deg,#fff0 44%,#fff 50%,#fff0 56%) 0 0/300% 300% no-repeat;background-position:0 100%;-webkit-mask:var(--ink) center/contain no-repeat,radial-gradient(ellipse 34% 40% at 30% 58%,#000 72%,#0000 100%);-webkit-mask-composite:source-in;mask:var(--ink) center/contain no-repeat,radial-gradient(ellipse 34% 40% at 30% 58%,#000 72%,#0000 100%);mask-composite:intersect;animation:bladeGlint 7s ease-in-out 2s infinite}
@keyframes bladeGlint{0%{background-position:100% 100%}22%,100%{background-position:0 0}}
@keyframes tipFlash{0%,16%{opacity:0;scale:.2;rotate:0deg}23%{opacity:1;scale:1;rotate:20deg}34%,100%{opacity:0;scale:.3;rotate:45deg}}
@media (prefers-reduced-motion:reduce){.hero-art::before{animation:none}}
.hero-art::before{left:calc(6% - 40px);top:calc(33% - 40px);width:80px;height:80px;background:#fff;clip-path:polygon(50% 0,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0 50%,45% 45%);filter:drop-shadow(0 0 8px #fff)}
.hero-art::after{background-image:linear-gradient(135deg,#fff0 42%,#fff 50%,#fff0 58%)}
/* light on the blade only: the mask is the scythe itself */
.hero-art{--blade:url(media/hero-blade.webp?v=1)}
.hero-art::after{inset:0;background:linear-gradient(135deg,#fff0 40%,#fff 50%,#fff0 60%) no-repeat;background-size:300% 300%;-webkit-mask:var(--blade) center/contain no-repeat;mask:var(--blade) center/contain no-repeat;-webkit-mask-composite:source-over;mask-composite:add;animation:bladeGlint 7s ease-in-out 2s infinite}
@keyframes bladeGlint{0%{background-position:100% 100%}30%,100%{background-position:0 0}}
@keyframes tipFlash{0%,24%{opacity:0;scale:.2;rotate:0deg}31%{opacity:1;scale:1;rotate:18deg}44%,100%{opacity:0;scale:.3;rotate:40deg}}
.hero-art::before{left:.3%;top:27.3%;width:11.4%;height:auto;aspect-ratio:1}
/* light runs along the very edge of the blade, from the base up to the tip */
.hero-art{--blade:url(media/hero-edge.webp?v=5)}
.hero-art::after{background:linear-gradient(0deg,#fff0 44%,#fff 49%,#fff 51%,#fff0 56%) no-repeat;background-size:100% 340%;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #ffffffb3);animation:edgeRun 6s cubic-bezier(.45,0,.3,1) 2s infinite}
@keyframes edgeRun{0%{background-position:0 0}42%,100%{background-position:0 100%}}
@keyframes tipFlash{0%,34%{opacity:0;scale:.2;rotate:0deg}41%{opacity:1;scale:1;rotate:18deg}54%,100%{opacity:0;scale:.3;rotate:40deg}}
.hero-art::before{animation:tipFlash 6s ease-out 2s infinite}
.hero-art::after{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px #ffffffcc)}
.hero-art::after{filter:none;background:linear-gradient(0deg,#fff0 38%,#fff 47%,#fff 53%,#fff0 62%) no-repeat;background-size:100% 300%;animation:edgeRun 6s cubic-bezier(.4,0,.5,1) 2s infinite}
.hero-art::before,.hero-art::after{display:none}
/* backlight: a soft glow in the fog behind the figure */
.hero-art::before{display:block;content:"";position:absolute;left:-14%;top:-14%;width:128%;height:128%;aspect-ratio:auto;clip-path:none;opacity:1;animation:none;filter:none;pointer-events:none;background:radial-gradient(closest-side at 54% 44%,#ffffff40,#ffffff18 46%,#ffffff00 100%)}
.red .hero-art::before{background:radial-gradient(closest-side at 54% 44%,#ff1f3a55,#ff1f3a20 46%,#ff1f3a00 100%)}
/* the words and the stack line up on the centre of the name */
.u-text{margin-inline:auto;text-align:center}
.u-icons{justify-content:center}
@media (min-width:900.02px){.under{width:calc(min(5.4vw,84px)*7.9);max-width:none}.u-text{max-width:none}}
/* minimum text size 13px */
.feat .step span,.feat .step.on span,.red .feat .step.on span{font-size:13px}
@media (max-width:360px){.ui-cmds button,.ui-sat,.boost .feat .step{font-size:13px}.ui-seg{grid-template-columns:repeat(4,auto)}.ui-seg span{font-size:12px}}
/* lying phone: name beside the drawing, otherwise it falls below the first screen */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .hero{align-items:flex-start;min-height:0;padding:72px 0 0 var(--gl)}
  .brand{--ns:5.4vw}
  .hero-art{position:absolute;right:var(--gr);top:56px;width:min(44vw,calc(100svh - 64px));margin:0}
  .under{width:calc(5.4vw*7.9 + var(--gl));max-width:none;margin:20px 0 0;padding:0 0 0 var(--gl)}
  .work{margin-top:72px}
}
/* project marks: one short scene each, hover on desktop, once on arrival on touch (.go set by main.js for 1.7s) */
.e-bar{transform-origin:50% 100%}
.e-end{fill:currentColor;transform-origin:50% 50%}
.e-key{transform-origin:21% 50%}
.e-run path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.22 1.3;stroke-dashoffset:.22}
.e-ring{fill:none;stroke:currentColor;stroke-width:1.6;transform-origin:50% 50%;opacity:0}
.e-caret{transform-box:fill-box;transform-origin:0 50%}
.art-files .e-fill,.art-media .e-fill,.art-arch .e-fill,.art-chat .e-fill{transform-box:fill-box;transform-origin:50% 100%}
.art-media .e-fill{transform-origin:50% 50%}
.art-chat .e-fill{transform-origin:25% 100%}
.go .art-files .e-sh{animation:iSheet 1.1s var(--out)}
.go .art-files .e-fill{animation:iLand 1.1s ease-out}
.go .art-media .e-ray{animation:iRay .5s ease-out calc(var(--n)*42ms) both}
.go .art-media .e-fill{animation:iBeat .9s var(--out) .15s}
.go .art-arch .e-fill{animation:iDrop .8s var(--out)}
.go .e-caret{animation:iType .35s steps(4) .2s both,iBlink .3s steps(1) .55s 3}
.go .art-chat .e-fill{animation:iPop .7s var(--out)}
.go .e-bar{animation:iBar .8s var(--out) calc(var(--n)*90ms) both}
.go .art-vod .e-fill{animation:iPress .4s ease-out}
.go .e-run path{animation:iRun 1s cubic-bezier(.45,0,.3,1) calc(.15s + var(--n)*90ms) both}
.go .e-end{animation:iEnd .5s var(--out) calc(.7s + var(--n)*90ms) both}
.go .e-key{animation:iTurn 1.3s var(--out)}
.go .e-ring{animation:iRing 1s ease-out .35s}
.go .e-ring.r2{animation-delay:.65s}
@keyframes iSheet{0%{transform:none}40%{transform:translateY(-15px)}75%{transform:translateY(2px)}100%{transform:none}}
@keyframes iLand{0%,55%{transform:none}72%{transform:scale(1.03,.95)}100%{transform:none}}
@keyframes iRay{0%{opacity:.8}35%{opacity:.15}100%{opacity:.8}}
@keyframes iBeat{0%{transform:none}35%{transform:scale(.86)}70%{transform:scale(1.07)}100%{transform:none}}
@keyframes iDrop{0%{transform:translateY(-7px)}60%{transform:translateY(2px)}100%{transform:none}}
@keyframes iType{from{transform:scaleX(0)}to{transform:none}}
@keyframes iBlink{50%{opacity:0}}
@keyframes iPop{0%{transform:scale(.95)}55%{transform:scale(1.03)}100%{transform:none}}
@keyframes iBar{0%{transform:scaleY(.15)}65%{transform:scaleY(1.1)}100%{transform:none}}
@keyframes iPress{50%{transform:translateX(3px)}}
@keyframes iRun{from{stroke-dashoffset:.22}to{stroke-dashoffset:-1.05}}
@keyframes iEnd{0%{transform:none}45%{transform:scale(1.25)}100%{transform:none}}
@keyframes iTurn{0%{transform:none}45%{transform:rotate(-30deg)}70%{transform:rotate(-30deg)}100%{transform:none}}
@keyframes iRing{0%{opacity:.6;transform:none}100%{opacity:0;transform:scale(1.42)}}

/* first screen: the art surfaces, then the name opens from its centre, the seal draws, the rest settles */
.intro:not(.intro-on) :is(.hero-art,h1,.bat,.u-text,.u-icons li,.nav nav,.live,.fog),.intro:not(.intro-on) .b-mark::before,.intro:not(.intro-on) .b-mark::after,.intro:not(.intro-on) .hero-art::before{animation-play-state:paused!important}
.intro .fog{animation:fadeIn 2.4s ease both}
.intro .hero-art{animation:iaArt 1.1s cubic-bezier(.22,.6,.2,1) backwards}
.intro .hero-art::before{animation:fadeIn 2.4s ease .3s backwards}
.intro h1{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;animation:iaName 1.25s cubic-bezier(.3,.1,.2,1) .35s backwards}
.intro .b-mark::before,.intro .b-mark::after{animation:iaLine .9s var(--out) 1.05s backwards}
.intro .b-mark::before{transform-origin:100% 50%}
.intro .b-mark::after{transform-origin:0 50%}
.intro .bat{animation:iaSeal .7s var(--out) 1s backwards}
.intro .u-text{animation:iaUp .8s var(--out) 1.3s backwards}
.intro .u-icons li{animation:iaUp .6s var(--out) calc(1.5s + var(--i,0)*26ms) backwards}
.intro .live{animation:iaUp .7s var(--out) 1.9s backwards}
.intro .nav nav{animation:fadeIn .9s ease 1.9s backwards}
.u-icons li:nth-child(1){--i:0}.u-icons li:nth-child(2){--i:1}.u-icons li:nth-child(3){--i:2}.u-icons li:nth-child(4){--i:3}.u-icons li:nth-child(5){--i:4}.u-icons li:nth-child(6){--i:5}.u-icons li:nth-child(7){--i:6}.u-icons li:nth-child(8){--i:7}.u-icons li:nth-child(9){--i:8}.u-icons li:nth-child(10){--i:9}.u-icons li:nth-child(11){--i:10}.u-icons li:nth-child(12){--i:11}.u-icons li:nth-child(13){--i:12}.u-icons li:nth-child(14){--i:13}.u-icons li:nth-child(15){--i:14}.u-icons li:nth-child(16){--i:15}.u-icons li:nth-child(17){--i:16}.u-icons li:nth-child(18){--i:17}.u-icons li:nth-child(19){--i:18}.u-icons li:nth-child(20){--i:19}.u-icons li:nth-child(21){--i:20}
@keyframes iaArt{from{opacity:0;scale:1.025}}
@keyframes iaName{from{opacity:0;translate:0 8px;-webkit-mask-image:radial-gradient(closest-side,#000 55%,#0000);mask-image:radial-gradient(closest-side,#000 55%,#0000);-webkit-mask-size:0% 500%;mask-size:0% 500%}to{-webkit-mask-image:radial-gradient(closest-side,#000 55%,#0000);mask-image:radial-gradient(closest-side,#000 55%,#0000);-webkit-mask-size:240% 500%;mask-size:240% 500%}}
@keyframes iaLine{from{opacity:0;transform:scaleX(0)}}
@keyframes iaSeal{from{opacity:0;scale:.82}}
@keyframes iaUp{from{opacity:0;translate:0 10px}}

/* the blade light is off: drop its mask so the file is never requested */
.hero-art{--blade:none;--ink:none}

/* the figure stands on the fog: the dots step back around her, the feet sink into the dark */
.hero-art::before{background:radial-gradient(closest-side at 54% 44%,#ffffff30,#ffffff14 46%,#ffffff00 100%)}
.red .hero-art::before{background:radial-gradient(closest-side at 54% 44%,#ff1f3a4a,#ff1f3a1c 46%,#ff1f3a00 100%)}
.hero-live{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 7px #ffffff33) drop-shadow(0 0 24px #ffffff1c)}
.red .hero-live{filter:drop-shadow(0 0 7px #ff1f3a55) drop-shadow(0 0 24px #ff1f3a2b)}
.hero-live,.hero-art .hero-fig{-webkit-mask:linear-gradient(#000 68%,#0000 99%);mask:linear-gradient(#000 68%,#0000 99%)}
.windy .hero-fig{visibility:hidden}

/* glow, the foot fade and the entrance all live in the shader now: no per-frame filter or mask work */
.hero-live{filter:none;-webkit-mask:none;mask:none}
.red .hero-live{filter:none}
.intro .hero-art.shader-in{animation:none}

/* hover: the card simply turns white */
.flood{background:#f2f1f6;clip-path:none;opacity:0;transition:opacity .3s ease;border-radius:inherit;will-change:opacity}
.act>.flood{clip-path:none;opacity:1}
.red .flood{background:#e0102a}
@media (prefers-reduced-motion:reduce){.flood{transition-duration:.01s}}

/* mediagothbot: a clapperboard that snaps shut; zavetkeybot: a shield that rises and settles */
.e-ins{fill:currentColor}
.e-arm{transform-box:fill-box;transform-origin:0 100%;transform:rotate(-9deg)}
.art-media .e-fill{transform-box:fill-box;transform-origin:50% 100%}
.art-key .e-fill{transform-box:fill-box;transform-origin:50% 50%}
.go .e-arm{animation:iClap 1.3s cubic-bezier(.4,0,.3,1)}
.go .art-media .e-fill{animation:iClick2 1.3s linear}
.go .e-hole{transform-box:fill-box;transform-origin:50% 30%}
.go .e-hole{animation:iHole 1.45s cubic-bezier(.45,0,.2,1)}
.go .art-key .e-fill{animation:iGuard .55s var(--out) .78s}
@keyframes iClap{0%{transform:rotate(-9deg)}34%,46%{transform:rotate(-20deg)}58%{transform:rotate(0deg)}65%{transform:rotate(-2.5deg)}72%{transform:rotate(0deg)}82%{transform:rotate(0deg)}100%{transform:rotate(-9deg)}}
@keyframes iClick2{0%,57%{transform:none}63%{transform:scale(1.03,.95)}72%,100%{transform:none}}
@keyframes iHole{0%{transform:none}32%,52%{transform:rotate(90deg)}82%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes iGuard{0%{transform:none}40%{transform:scale(1.04)}100%{transform:none}}
.ui-top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* language: Russian is the source page, English is swapped in by i18n.js */
.pre-en body{visibility:hidden}
.lang-en .flow .y::before,.lang-en .flow .o::before{content:"source"}
.lang{position:absolute;z-index:5;top:calc(28px + env(safe-area-inset-top,0px));right:var(--gr);display:flex;align-items:center;gap:0;height:22px;padding:0 2px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lang:focus-visible{outline:1px solid #ffffff80;outline-offset:4px;border-radius:4px}
.lg-t{position:relative;display:block;padding:4px 5px;font:500 11px/1 var(--mono,monospace);letter-spacing:.08em;color:#5c5c5a;transition:color .3s ease}
.lg-ru,.lang-en .lg-en{color:#a8a8a6}
.lang-en .lg-ru{color:#5c5c5a}
.lg-ru::after{content:"/";position:absolute;right:-3px;color:#3e3e3c}
.lang:hover .lg-t{color:#8a8a88}.lang:hover .lg-ru,.lang-en .lang:hover .lg-en{color:#e6e6e4}
.lang-en .lang:hover .lg-ru{color:#8a8a88}
.lg-th{display:none}
.lang::before{content:"";position:absolute;inset:-11px -8px}
@media (max-width:900px){.lang{top:calc(74px + env(safe-area-inset-top,0px))}}

/* ===== three demos, one motion language (03.11) ===== */
/* one easing everywhere, nothing overshoots; the old panel leaves first, the new one rises in after it */
:root{--e:cubic-bezier(.22,.8,.24,1)}
@media (min-width:900.02px){
  .ui.on .ui-card.pop{animation:none}
  .ui.play .ia{animation:dRise .6s var(--e) var(--t,0s) both}
  .js .ui:not(.play) .ia{opacity:0}
  .boost .fb-msg,.boost .fb-head,.boost .fb-block,.boost .fb-link{translate:0 0 calc(var(--dp,0)*24px)}
  .boost .fb-get,.boost .fb-seg{translate:0 0 calc(var(--dp,0)*34px)}
}
@keyframes dRise{from{opacity:0;transform:translateY(10px)}}
/* story beats play on phones too */
.ui.play .beat{animation:dRise .6s var(--e) var(--t,0s) both}
.js .ui:not(.play) .beat{opacity:0}
@keyframes dSwap{from{opacity:0;transform:translateY(4px)}}
@keyframes dGone{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
@keyframes dPress{50%{transform:scale(.96)}}

/* gothfilebot */
.fb.ui-card{gap:14px}
.fb-chat.ui-card{justify-content:flex-end}
.fb-msg{margin:0;font-size:14px}
.fb-msg.me{align-self:flex-end;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;width:min(60%,290px)}
.fb-pic{position:relative;flex:1;min-height:96px;border-radius:18px 18px 6px 18px;overflow:hidden;background:url(media/photo-fb.webp?v=1) 22% 38%/cover;box-shadow:inset 0 0 0 1px #ffffff1f}
.fb-ring{position:absolute;inset:0;display:grid;place-items:center;background:#0009;opacity:0}
.fb-ring svg{width:44px;height:44px;transform:rotate(-90deg);fill:none;stroke:#f4f4f2;stroke-width:3;stroke-linecap:round;stroke-dasharray:101;stroke-dashoffset:0}
.ui.play .fb-ring{animation:fbVeil 1.5s ease .1s both}
.ui.play .fb-ring svg{animation:fbRing 1.1s cubic-bezier(.45,0,.25,1) .2s both}
@keyframes fbVeil{0%,80%{opacity:1}}
@keyframes fbRing{from{stroke-dashoffset:101}}
.fb-meta{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--ash)}
.fb-ticks{width:18px;height:12px;color:#f4f4f2}
.ui.play .fb-ticks{animation:fbTick .3s ease 1.35s both}
@keyframes fbTick{from{color:#ffffff40}}
.js .ui:not(.play) .fb-ticks{color:#ffffff40}
.fb-msg.bot{align-self:flex-start;width:min(88%,380px);padding:12px;border-radius:18px 18px 18px 6px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12}
.fb-said{display:flex;align-items:center;gap:8px;margin:0 0 10px 2px;font-weight:500}
.fb-said .ic{width:16px;height:16px}
.fb-dirs{display:grid;gap:6px}
.fb-dirs p{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border-radius:10px;background:#ffffff08;font-weight:500}
.fb-dirs p span{flex:1;min-width:0}
.fb-dirs .ic{width:17px;height:17px;flex:none;opacity:.6}
.fb-dirs em{font-style:normal;font-size:13px;font-weight:400;opacity:.6;font-variant-numeric:tabular-nums}
.fb-dirs .on{background:#f4f4f2;color:#0a0a0b}
.fb-n{display:grid;text-align:right}
.fb-n b{grid-area:1/1;font-weight:inherit}
.fb-n b:first-child{opacity:0}
.ui.play .fb-dirs .on{animation:fbLit .45s ease 1.85s both}
@keyframes fbLit{from{background:#ffffff08;color:#f4f4f2}}
.ui.play .fb-n b:first-child{animation:dGone .25s ease 1.85s backwards}
.ui.play .fb-n b:last-child{animation:dSwap .35s var(--e) 2.08s both}
.js .ui:not(.play) .fb-dirs .on{background:#ffffff08;color:#f4f4f2}
.js .ui:not(.play) .fb-n b:first-child{opacity:1}
.js .ui:not(.play) .fb-n b:last-child{opacity:0}

.fb-head{display:flex;align-items:center;gap:12px}
.fb-head p{margin:0}
.fb-head b{display:block;font-size:18px;font-weight:500;letter-spacing:-.01em}
.fb-head small{display:block;margin-top:1px;font-size:13px;color:var(--ash)}
.fb-fold{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:#f4f4f2;color:#0a0a0b}
.fb-fold .ic{width:22px;height:22px}
.fb-label{margin:0 0 8px;font-size:13px;color:var(--ash)}
.fb-seg{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;border-radius:12px;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff12}
.fb-seg{isolation:isolate}
.fb-seg span{position:relative;z-index:1;padding:10px 2px;text-align:center;font-size:13px;font-weight:500;color:#9a9a98;white-space:nowrap;mix-blend-mode:difference}
.fb-seg .on{color:#f4f4f2}
.fb-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/4);border-radius:9px;background:#f4f4f2;transform:translateX(200%)}
.ui.play .fb-thumb{animation:fbSlide .85s var(--e) .75s both}
@keyframes fbSlide{from{transform:none}}
@keyframes fbInk{from{color:#0a0a0b}}
@keyframes fbUnink{from{color:var(--ash);font-weight:500}}
.js .ui:not(.play) .fb-thumb{transform:none}
.fb-link{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 8px 8px 14px;border-radius:12px;background:#000;box-shadow:inset 0 0 0 1px #ffffff1f;font-size:14px}
.fb-link>.ic{width:18px;height:18px;flex:none;color:var(--ash)}
.fb-url{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--mono,ui-monospace,monospace);font-size:13px}
.ui.play .fb-url{animation:axType .7s steps(28) 1.35s backwards}
.js .ui:not(.play) .fb-url{clip-path:inset(0 100% 0 0)}
.fb-copy{display:grid;flex:none;padding:8px 12px;border-radius:8px;background:#f4f4f2;color:#0a0a0b;font-size:13px;font-weight:500}
.fb-copy b{grid-area:1/1;font-weight:inherit;text-align:center}
.fb-copy b:first-child{opacity:0}
.ui.play .fb-copy b:first-child{animation:dGone .2s ease 2.1s backwards}
.ui.play .fb-copy b:last-child{animation:dSwap .3s var(--e) 2.28s both}
.js .ui:not(.play) .fb-copy b:first-child{opacity:1}
.js .ui:not(.play) .fb-copy b:last-child{opacity:0}
.fb-who{display:grid}
.fb-person{display:flex;align-items:center;gap:12px;margin:0;padding:8px 0;font-size:14px;font-weight:500}
.fb-person+.fb-person{border-top:1px solid #ffffff12}
.fb-person i{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#2a2a2b;font-style:normal;font-size:13px;color:#ddd}
.fb-person.fb-new i{background:none;box-shadow:inset 0 0 0 1.5px #ffffff40;outline:1.5px dashed #ffffff00}
.fb-person>span{flex:1;min-width:0}
.fb-person small{display:block;font-size:12.5px;font-weight:400;color:var(--ash)}
.fb-person em{font-style:normal;font-size:13px;font-weight:400;color:var(--ash);white-space:nowrap}
.ui.play .fb-new{animation:dRise .55s var(--e) 2.55s both}
.js .ui:not(.play) .fb-new{opacity:0}

.fb-gift.fb-msg.bot{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;width:min(100%,430px);padding:14px}
.fb-title{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em}
.fb-sub{margin:-6px 0 0;font-size:13px;color:var(--ash)}
.fb-album{position:relative;flex:1;min-height:110px;border-radius:12px;overflow:hidden;background:url(media/photo-fb.webp?v=1) 22% 38%/cover}
.fb-album::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(#0000,#000b)}
.fb-album span{position:absolute;z-index:1;left:12px;bottom:10px;font-size:14px;font-weight:500;color:#fff}
.fb-album small{margin-left:8px;font-size:12.5px;font-weight:400;opacity:.75}
.fb-ph{display:none}
.fb-get{position:relative;display:grid;padding:13px;border-radius:12px;overflow:hidden;isolation:isolate;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff1a;color:#fff;font-size:14px;font-weight:500;text-align:center}
.fb-get u{position:absolute;inset:0;z-index:-1;background:#f4f4f2;transform-origin:left}
.fb-get b{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:inherit;mix-blend-mode:difference}
.fb-get .ic{width:16px;height:16px}
.fb-get b:first-of-type{opacity:0}
.ui.play .fb-get{animation:dPress .3s ease .95s}
.ui.play .fb-get u{animation:fbFill 1s cubic-bezier(.45,0,.25,1) 1.05s both}
@keyframes fbFill{from{transform:scaleX(0)}}
.ui.play .fb-get b:first-of-type{animation:dGone .2s ease 2.05s backwards}
.ui.play .fb-get b:last-child{animation:dSwap .3s var(--e) 2.24s both}
.js .ui:not(.play) .fb-get u{transform:scaleX(0)}
.js .ui:not(.play) .fb-get b:first-of-type{opacity:1}
.js .ui:not(.play) .fb-get b:last-child{opacity:0}
@media (min-width:900.02px){
  .fb-msg,.fb-person,.fb-link{font-size:15px}
  .fb-title{font-size:19px}
  .fb-seg span{padding-block:12px;font-size:14px}
}
@media (max-width:900px){
  .fb.ui-card{gap:12px}
  .fb-msg.me{width:min(64%,240px)}
  .fb-msg.bot{padding:10px}
  .fb-said{margin-bottom:8px}
  .fb-dirs p{padding:7px 10px}
  .fb-person{padding:6px 0}
  .fb-head b{font-size:16px}
  .fb-fold{width:40px;height:40px}
  .fb.ui-card>.fb-head+*{margin-top:0}
  .fb.ui-card>.fb-who:last-child{margin-top:auto}
  .fb-gift .fb-sub+*{margin-top:0}
}
@media (max-width:360px){.fb-seg span{font-size:11.5px}.fb-copy{padding-inline:8px}}
.red .fb-fold,.red .fb-thumb,.red .fb-copy,.red .fb-dirs .on,.red .fb-get u{background:#e0102a;color:#fff}

/* gothchat */
.gc-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gc-row .ui-sub{margin:0}
.gc-live{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;color:var(--ash);font-variant-numeric:tabular-nums}
.gc-live i{width:7px;height:7px;border-radius:50%;background:#f4f4f2;animation:livePing 2.4s ease-out infinite}
.gc-live time{color:#e4e4e2}
.ui-cmds button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:10px 12px;text-align:left;line-height:1.25}
.ui-cmds button span{font-size:14px;font-weight:500}
.ui-cmds button small{font-size:12px;font-weight:400;color:var(--ash);transition:color .25s}
.ui-cmds button:hover small,.ui-cmds .hit small{color:#56565a}
.ui.play .ui-cmds button{animation:dRise .5s var(--e) calc(.1s + var(--n,0)*35ms) both}
.js .ui:not(.play) .ui-cmds button{opacity:0;transform:translateY(10px)}
.ui-log{gap:2px;-webkit-mask-image:linear-gradient(#0000,#000 36px);mask-image:linear-gradient(#0000,#000 36px)}
.ui-log p{align-self:stretch;max-width:none;padding:6px 10px;border-radius:8px;background:none;font-size:14px;line-height:1.45}
.ui-log p b{display:inline;margin-right:6px;font-size:14px;font-weight:600;color:#9d9d9b}
.ui-log p b::after{content:":"}
.ui-log .bot{align-self:stretch;background:#ffffff0d;color:#f4f4f2;border-radius:8px}
.ui-log .bot b{color:#f4f4f2}
.ui-log .bot b::before{content:"бот";display:inline-block;margin-right:6px;padding:1px 5px;border-radius:4px;background:#f4f4f2;color:#0a0a0b;font-size:11px;font-weight:600;vertical-align:1px}
.lang-en .ui-log .bot b::before{content:"bot"}
.red .ui-log .bot{background:#e0102a1f;color:#f4f4f2}
.red .ui-log .bot b::before{background:#e0102a;color:#fff}
@media (max-width:900px){.ui-cmds button{padding:8px 9px}.ui-cmds button small{font-size:11.5px}}
@media (max-width:360px){.ui-cmds button{padding-inline:7px}.ui-cmds button span{font-size:12.5px}.ui-cmds button small{font-size:10.5px}}

/* zavetkeybot: the code sits in a real field */
.kx-code{padding:14px 18px;border-radius:12px;background:#000;box-shadow:inset 0 0 0 1px #ffffff1f}
@media (min-width:900.02px){.kx-lock svg{width:72px}.kx-code{padding:16px 24px}}
/* the copy button wakes up once there is a link to copy */
.ui.play .fb-copy{animation:fbWake .3s ease 1.95s both,dPress .3s ease 2.05s}
@keyframes fbWake{from{opacity:.35}}
.js .ui:not(.play) .fb-copy{opacity:.35}

/* demo shell: a lit top edge and a soft glow behind */
.feat .shots .ui-card,.boost .ui-card{border-radius:24px;background:
  radial-gradient(90% 55% at 50% -8%,#ffffff14,#fff0 70%),
  #0b0b0d;
  box-shadow:inset 0 1px 0 #ffffff33,inset 0 0 0 1px #ffffff1c,0 1px 0 1px #000,0 48px 90px -36px #000}
.boost .ui-stack::before,.sl{border-radius:24px}
@media (min-width:900.02px){
  .feat .shots::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:min(110%,760px);aspect-ratio:1.6;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#ffffff0d,#fff0);pointer-events:none}
}
/* inner surfaces on one radius scale */
.fb-msg.bot,.fb-pic{border-radius:18px 18px 18px 6px}.fb-pic{border-radius:18px 18px 6px 18px}
.fb-dirs p,.fb-link,.fb-seg,.fb-get,.ui-input,.ui-cmds button,.kx-code{border-radius:12px}
.fb-thumb{border-radius:9px}
.ui-sat{box-shadow:0 0 0 1px #0000000d,0 14px 34px -10px #000,0 0 24px #ffffff1f}

/* ===== desktop demos v2: whole cards slide between steps, nothing in 3D ===== */
@media (min-width:900.02px){
  .feat .shots .ui-stack,.boost .ui-stack{transform:none;transform-style:flat}
  .boost .ui-card,.boost .kx-stage{transform-style:flat}
  .feat .shots .ui-stack *{translate:none}
  .sl,.boost .ui-stack::before,.boost .ui-stack::after,.boost .ui-card::before,.boost .ui-card::after{display:none}
  .boost .feat .shots{perspective:none}
  /* the whole card slides: the old one leaves toward its side of the row, the next one arrives from the other */
  .feat .shots .ui,.boost .feat .shots .ui{z-index:1;opacity:0;visibility:hidden;transform:translate3d(calc(var(--s,1)*80px),0,0) scale(.96);transition:opacity .24s ease,transform .5s cubic-bezier(.4,0,.6,1),visibility 0s .5s}
  .feat .shots .ui.on,.boost .feat .shots .ui.on{z-index:2;opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .16s,transform .8s var(--e) .16s}
  .feat .shots .ui.play .ia{animation-delay:calc(var(--t,0s) + .12s)}
}
@media (min-width:900.02px){.feat .shots .sl,.near .sl{display:none}}
/* chat history never replays: only a new message animates, once, when it arrives */
.ui.on .ui-log .pop{animation:none}
.ui.play .ui-log p.pop{animation:none}
.js .ui:not(.play) .ui-log p.pop{opacity:1}

/* ===== project cards: base for the console look ===== */
.cv .row .flood{display:none}
.cv .row .in.act{color:inherit}
.cv .row .act .top,.cv .row .act .line{color:var(--ash)}
.cv .row .in{--mx:70%;--my:40%}
.cv .row .in .body{z-index:2}

/* ===== project cards: a console per project — cartridge in a slot above, terminal screen below ===== */
.cv .row .in{background:linear-gradient(175deg,#161618,#0b0b0c 60%);box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff12,0 30px 60px -30px #000;transition:translate .6s var(--e),box-shadow .6s var(--e)}
.cv .row .in.act{translate:0 -4px;box-shadow:inset 0 1px 0 #ffffff33,inset 0 0 0 1px #ffffff1a,0 44px 80px -30px #000}
.cv .row .top,.cv .row .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cv .row .body{padding:14px}
.cv .dev{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
/* the bay: the cartridge stands in a slot and drops home on hover */
.cv .bay{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:12px;background:radial-gradient(70% 90% at 50% 100%,#ffffff0a,#fff0 70%)}
.cv .slot{position:absolute;left:8%;right:8%;bottom:0;height:34px;z-index:2;border-radius:10px 10px 0 0;background:linear-gradient(#1d1d20,#0e0e10);box-shadow:inset 0 1px 0 #ffffff24,0 -14px 24px -8px #000}
.cv .slot::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:5px;border-radius:0 0 3px 3px;background:#000}
.cv .led{position:absolute;right:calc(8% + 14px);bottom:13px;z-index:3;width:7px;height:7px;border-radius:50%;background:#2c2c2e;transition:background .3s .35s,box-shadow .3s .35s}
.cv .cart{position:absolute;left:50%;bottom:-26px;z-index:1;width:min(76%,230px);height:min(calc(100% + 6px),250px);translate:-50% 0;border-radius:12px 12px 4px 4px;
  background:linear-gradient(90deg,#1c1c1f,#2a2a2d 45%,#1c1c1f);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 0 0 1px #ffffff12,0 20px 30px -12px #000;
  transition:transform .45s cubic-bezier(.5,0,.3,1.25)}
.cv .ribs{position:absolute;left:14px;right:14px;top:10px;height:18px;border-radius:3px;background:repeating-linear-gradient(90deg,#0000 0 5px,#0009 5px 8px)}
.cv .lbl{position:absolute;left:12px;right:12px;top:36px;bottom:46px;display:flex;flex-direction:column;justify-content:space-between;padding:12px;border-radius:8px;overflow:hidden;background:#f2f2ee;color:#0b0b0c}
.cv .lbl::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#fff0 30%,#ffffffc0 45%,#fff0 60%) 220% 0/250% 100% no-repeat;pointer-events:none}
.cv .lbl .art{position:relative;flex:1;min-height:0;margin:0;color:#0b0b0c}
.cv .lbl .art::before{display:none}
.cv .lbl .art svg{inset:0;margin:auto;height:100%;max-height:96px;scale:1!important;filter:none!important;translate:none!important;opacity:1!important}
.cv .ln{font:800 clamp(15px,1.4vw,19px)/1.05 var(--mono,monospace);letter-spacing:-.03em;overflow-wrap:anywhere}
/* the screen */
.cv .scr{position:relative;flex:none;height:42%;min-height:132px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#060606;
  box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 0 50px #000;font:500 13px/1.55 var(--mono,monospace);color:#e8e8e8}
.cv .scr::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#0000004d 2px 3px)}
.cv .scr::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 100% at 50% 40%,#ffffff0a,#0000 60%,#0009)}
.cv .sh{display:flex;justify-content:space-between;gap:10px;padding:8px 12px 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6f6f6c;white-space:nowrap;overflow:hidden}
.cv .out{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:6px 12px 10px;overflow:hidden}
.cv .tl{display:block;text-shadow:0 0 8px #ffffff59;overflow-wrap:anywhere}
.cv .tl.dim{color:#9a9a9a;text-shadow:none}
.cv .tl.ok{color:#f3f3f3}
.cv .pr{color:#7e7e7e;text-shadow:none}
.cv .scr .cur{display:inline-block;width:8px;height:15px;vertical-align:-3px;background:#e8e8e8;box-shadow:0 0 8px #fff;animation:blink 1s steps(2) infinite}
/* hover: home, light, wake */
.cv .act .cart{transform:translateY(22px)}
.cv .act .lbl::after{transition:background-position 1s var(--e) .3s;background-position:-100% 0}
.cv .act .led{background:#f4f4f2;box-shadow:0 0 10px #fff,0 0 2px #fff}
.cv .act .scr{animation:wake .5s steps(1) .3s}
@keyframes wake{0%{filter:brightness(2.2)}20%{filter:brightness(.4)}40%{filter:brightness(1.6)}60%{filter:none}}
.cv .act .bay{animation:clunk .3s ease .38s}
@keyframes clunk{50%{transform:translateY(2px)}}
/* phones: the console lies on its side — screen left, a short cartridge in a side slot right */
@media (max-width:900px){
  .cv .row .in .body{display:block;padding:10px}
  .cv .dev{flex-direction:row-reverse;gap:10px;height:118px}
  .cv .bay{flex:0 0 92px}
  .cv .cart{width:72px;height:128px;bottom:-34px}
  .cv .ribs{left:8px;right:8px;top:6px;height:10px}
  .cv .lbl{left:6px;right:6px;top:20px;bottom:40px;padding:6px}
  .cv .lbl .art svg{max-height:44px}
  .cv .ln{display:none}
  .cv .slot{left:4%;right:4%;height:26px}
  .cv .led{bottom:9px;right:12px}
  .cv .scr{flex:1;height:auto;min-height:0}
  .cv .out{padding:4px 10px 8px}
  .cv .scr{font-size:12.5px}
  .cv .tl:first-child{font-weight:700}
  .cv .boot .cart{animation:homeIn .7s cubic-bezier(.5,0,.3,1.25) .2s both}
  .cv .boot .led{background:#f4f4f2;box-shadow:0 0 10px #fff;transition-delay:.7s}
  .cv .boot .scr{animation:wake .5s steps(1) .7s}
}
@keyframes homeIn{from{transform:translateY(-26px)}}
@media (prefers-reduced-motion:reduce){.cv .cart,.cv .act .scr,.cv .act .bay{transition:none;animation:none}}
/* fixes after the first shots */
.cv .lbl{flex-direction:column-reverse;bottom:auto;height:calc(100% - 92px);top:34px}
.cv .cart{bottom:-14px;height:calc(100% - 10px);max-height:270px}
.cv .scr{text-align:left}
.cv .scr .cur{border-radius:0}
.cv .tl.dim{font:400 13px/1.45 var(--sans);letter-spacing:0;margin-top:2px}
.cv .typing .tl.dim{display:none}
@media (max-width:900px){
  .cv .scr::before{opacity:.45}
  .cv .cart{bottom:-10px;height:120px}
  .cv .lbl{top:20px;height:62px}
  .cv .tl.dim{font-size:13px}
  .cv .sh{padding-top:6px}
}

/* polish: the screen reads from the top, the cartridge stays readable when home */
.cv .out{justify-content:flex-start;padding-top:8px}
.cv .act .cart{transform:translateY(14px)}
.cv .tl.hint{color:#9a9a9a;text-shadow:none;margin-top:2px}

/* the screen holds a picture that powers on and off like a tube */
.cv .pic{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.cv .pwr{position:absolute;right:10px;bottom:9px;z-index:3;width:5px;height:5px;border-radius:50%;background:#2e2e30;transition:background .3s,box-shadow .3s}
.cv .on .pwr{background:#f4f4f2;box-shadow:0 0 6px #fff}
.cv .scr{background:linear-gradient(160deg,#ffffff0b,#fff0 38%),#050505}
.cv .prompt{display:none}
@media (hover:hover){
  .cv .on .prompt{display:block}
  .cv12 .pic{transform:scale(1,.006);opacity:0;filter:brightness(3);transition:transform .22s cubic-bezier(.6,0,1,1),opacity .08s linear .2s,filter .2s}
  .cv12 .on .pic{transform:none;opacity:1;filter:none;animation:crtOn .5s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes crtOn{0%{transform:scale(0,.006);opacity:1;filter:brightness(4)}35%{transform:scale(1,.006);filter:brightness(4)}100%{transform:none;opacity:1;filter:none}}
/* a bigger cartridge, a shorter screen */
@media (min-width:900.02px){
  .cv12 .scr{height:36%;min-height:124px}
  .cv12 .cart{width:min(86%,300px);max-height:300px}
  .cv12 .lbl .art svg{max-height:128px}
  .cv12 .ln{font-size:clamp(17px,1.6vw,23px)}
}

/* like a real terminal: when the text runs past the screen, the oldest lines leave at the top */
.cv .on .out{justify-content:flex-end}

/* ===== solid object, no box (03.11): the card is just the device standing on the page ===== */
.cv .row .in,.cv .row .in.act{background:none;box-shadow:none;translate:none;overflow:visible;border-radius:0}
.cv .row .in .body{padding:0}
.cv .dev{position:relative;gap:0}
.cv .bay{flex:1;min-height:0;overflow:visible;background:none;border-radius:0;z-index:0}
.cv .slot,.cv .bay>.led{display:none}
/* the cartridge: machined graphite, grip lines, a fine-print label */
.cv .cart{left:50%;bottom:-30px;width:min(70%,290px);height:calc(100% + 18px);max-height:300px;border-radius:16px 16px 6px 6px;
  background:linear-gradient(90deg,#141416,#2b2b2f 18%,#232326 50%,#2b2b2f 82%,#141416);
  box-shadow:inset 0 1px 0 #ffffff40,inset 0 0 0 1px #ffffff14,inset 0 -30px 40px -20px #000,0 26px 40px -18px #000;transition:transform .55s cubic-bezier(.5,0,.25,1.2)}
.cv .cart::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:linear-gradient(90deg,#fff0,#ffffff80,#fff0)}
.cv .ribs{left:18px;right:18px;top:12px;height:14px;border-radius:2px;background:repeating-linear-gradient(90deg,#0000 0 4px,#000a 4px 6px);box-shadow:0 1px 0 #ffffff14}
.cv .grip{position:absolute;left:6px;right:6px;top:40px;bottom:40px;pointer-events:none;
  background:repeating-linear-gradient(#0000 0 5px,#0006 5px 6px,#ffffff0d 6px 7px) left/5px 100% no-repeat,repeating-linear-gradient(#0000 0 5px,#0006 5px 6px,#ffffff0d 6px 7px) right/5px 100% no-repeat}
.cv .lbl{left:18px;right:18px;top:36px;height:auto;bottom:44px;flex-direction:column;justify-content:flex-start;gap:8px;padding:12px 14px;border-radius:6px;
  background:linear-gradient(170deg,#f6f6f2,#e4e3dd);box-shadow:inset 0 0 0 1px #0000001a,0 1px 0 #ffffff26}
.cv .tag{display:flex;justify-content:space-between;gap:8px;font:700 10px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#0b0b0c99;padding-bottom:8px;border-bottom:1.5px solid #0b0b0c}
.cv .lbl .art{order:0}
.cv .ln{order:1}
.cv .lbl .art svg{max-height:110px}
/* the console body: one piece with a mouth for the cartridge, a power light and the screen set into it */
.cv .unit{position:relative;z-index:1;flex:none;display:block;padding:30px 14px 14px;border-radius:20px;
  background:linear-gradient(#26262a,#141416 22%,#0d0d0f);
  box-shadow:inset 0 1px 0 #ffffff38,inset 0 0 0 1px #ffffff12,inset 0 -2px 0 #000,0 2px 0 #000,0 40px 60px -26px #000,0 0 0 1px #000}
.cv .mouth{position:absolute;left:50%;top:10px;width:min(74%,304px);height:9px;translate:-50% 0;border-radius:5px;background:#000;box-shadow:inset 0 2px 3px #000,0 1px 0 #ffffff1f}
.cv .unit>.led{position:absolute;right:18px;top:12px;bottom:auto;width:6px;height:6px;border-radius:50%;background:#2c2c2e;transition:background .3s .35s,box-shadow .3s .35s}
.cv .on .unit>.led,.cv .boot .unit>.led{background:#f4f4f2;box-shadow:0 0 10px #fff}
.cv .scr{height:auto;min-height:0;aspect-ratio:auto;border-radius:10px;box-shadow:inset 0 0 0 1px #000,inset 0 2px 10px #000,inset 0 0 50px #000,0 1px 0 #ffffff14}
@media (min-width:900.02px){.cv .scr{height:150px}}
.cv .on .cart{transform:translateY(24px)}
/* standby: the screen is off but alive */
.cv .idle{position:absolute;left:12px;bottom:9px;z-index:3;display:flex;align-items:center;gap:2px;font:500 11px var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#ffffff30;transition:opacity .2s}
.cv .idle i{display:inline-block;width:6px;height:2px;margin-left:3px;background:currentColor;animation:blink 1.4s steps(2) infinite}
.cv .on .idle{opacity:0}
@media (hover:none),(max-width:900px){.cv .idle{display:none}}
/* phones: the same object, smaller; the cartridge stands to the right above the body */
@media (max-width:900px){
  .cv .row{gap:18px}
  .cv .dev{flex-direction:column;height:auto}
  .cv .bay{flex:none;height:76px;overflow:hidden;margin-bottom:-6px}
  .cv .cart{left:auto;right:22px;translate:none;width:150px;height:130px;bottom:-60px}
  .cv .lbl{top:28px;bottom:auto;height:auto;flex-direction:row;align-items:center;gap:8px;padding:6px 8px}
  .cv .tag{display:none}
  .cv .lbl .art{flex:0 0 30px;height:30px}
  .cv .lbl .art svg{max-height:30px}
  .cv .ln{display:block;font-size:13px}
  .cv .grip{display:none}
  .cv .unit{padding:22px 10px 10px}
  .cv .mouth{left:auto;right:16px;translate:none;width:164px;top:7px;height:7px}
  .cv .unit>.led{right:auto;left:16px;top:9px}
  .cv .scr{height:auto;flex:none}
  .cv .boot .cart{animation:homeIn .7s cubic-bezier(.5,0,.3,1.25) .2s both}
}
.cv .tag span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cv .tag span:first-child{flex:none}
.cv .out{-webkit-mask:linear-gradient(#0000,#000 12px);mask:linear-gradient(#0000,#000 12px)}
@media (max-width:900px){
  .cv .ln{display:none}
  .cv .tag{display:flex;flex:1;border:0;padding:0;font-size:11px;color:#0b0b0c}
  .cv .tag span:last-child{display:none}
  .cv .cart{width:132px}
  .cv .mouth{width:146px}
  .cv .lbl{justify-content:space-between}
  .cv .lbl .art{order:1}
}

/* ===== wide cartridge pass (03.11): the cartridge spans the slot, label laid out landscape ===== */
@media (min-width:900.02px){
  .cv .bay{display:flex;align-items:flex-end;justify-content:center}
  .cv .cart{left:16px;right:16px;width:auto;translate:none;bottom:-26px;height:min(calc(100% + 10px),230px);border-radius:18px 18px 6px 6px}
  .cv .mouth{left:16px;right:16px;width:auto;translate:none;top:11px;height:8px}
  .cv .unit>.led{display:none}
  .cv .ribs{left:24px;right:24px;top:12px;height:12px}
  .cv .grip{top:34px;bottom:34px;left:7px;right:7px}
  /* the label: number and kind on top, the mark left, the name big at bottom right */
  .cv .lbl{left:22px;right:22px;top:32px;bottom:38px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;gap:10px 16px;padding:12px 16px 14px}
  .cv .tag{grid-column:1/-1}
  .cv .lbl .art{grid-row:2;align-self:end;width:clamp(56px,6vw,92px);height:clamp(56px,6vw,92px);flex:none}
  .cv .lbl .art svg{max-height:none;height:100%}
  .cv .ln{grid-row:2;align-self:end;justify-self:end;text-align:right;font-size:clamp(18px,1.9vw,30px);line-height:.95;letter-spacing:-.04em}
  /* the label print: faint stripes on the right like a cartridge's art band */
  .cv .lbl::before{content:"";position:absolute;right:-30px;top:-20%;width:44%;height:140%;pointer-events:none;
    background:repeating-linear-gradient(115deg,#0b0b0c0d 0 10px,#0000 10px 22px);transform:skewX(-8deg)}
  /* the body: vents and a quiet maker's mark */
  .cv .unit{padding:30px 16px 30px}
  .cv .unit::after{content:"ZAVETGOTH";position:absolute;left:18px;bottom:9px;font:700 9px/1 var(--mono,monospace);letter-spacing:.32em;color:#ffffff26}
  .cv .unit::before{content:"";position:absolute;right:18px;bottom:11px;width:46px;height:6px;background:repeating-linear-gradient(90deg,#000 0 3px,#0000 3px 6px);opacity:.8}
  .cv .unit>.pwr,.cv .scr>.pwr{display:none}
  .cv .scr{height:136px}
  /* status light moves onto the body next to the mark */
  .cv .unit>.led{display:block;left:auto;right:74px;top:auto;bottom:10px;width:5px;height:5px}
  /* hover: deeper insert, a soft shadow pools on the body under the cartridge */
  .cv .on .cart{transform:translateY(22px)}
  .cv .tl.boot{color:#7e7e7e;text-shadow:none}
}
@media (min-width:900.02px) and (max-width:1180px){.cv .lbl .art{width:52px;height:52px}.cv .ln{font-size:18px}}
/* the name always fits on one line: it scales with the label's width */
@media (min-width:900.02px){
  .cv .lbl{container-type:inline-size}
  .cv .ln{white-space:nowrap;overflow-wrap:normal;font-size:clamp(14px,min(9.5cqi,30px),30px)}
  .cv .lbl .art{width:clamp(44px,22cqi,92px);height:clamp(44px,22cqi,92px)}
}
@media (min-width:900.02px) and (max-width:1180px){.cv .ln{font-size:clamp(14px,min(9.5cqi,30px),30px)}}
/* a narrow label stacks: the mark above, the name below, both readable */
@container (max-width:250px){
  .cv .lbl .art{grid-column:1/-1;grid-row:2;align-self:center;justify-self:start;width:52px;height:52px}
  .cv .ln{grid-column:1/-1;grid-row:3;justify-self:start;text-align:left;font-size:clamp(15px,12cqi,22px)}
  .cv .tag span:last-child{display:none}
}
@media (min-width:900.02px){.cv .lbl{grid-template-rows:auto 1fr auto}}
/* the label in the site's own ink: black paper, white print, a fine silver edge */
.cv .lbl{background:linear-gradient(170deg,#141416,#08080a 70%);color:#f2f2ee;
  box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff2e,0 1px 0 #ffffff14}
.cv .lbl .art{color:#f2f2ee}
.cv .lbl .art svg{filter:drop-shadow(0 0 14px #ffffff33)!important}
.cv .tag{color:#ffffff80;border-bottom-color:#ffffff40}
.cv .ln{color:#f6f6f2;text-shadow:0 0 18px #ffffff26}
.cv .lbl::before{background:repeating-linear-gradient(115deg,#ffffff08 0 10px,#0000 10px 22px)}
.cv .lbl::after{background:linear-gradient(105deg,#fff0 30%,#ffffff26 45%,#fff0 60%) 220% 0/250% 100% no-repeat}
@media (max-width:900px){.cv .tag{color:#f2f2ee}}
.red .cv .lbl .art,.red .cv .ln{color:#fff}

/* ===== screensavers: one quiet phosphor scene per project while the terminal is off ===== */
.saver{position:absolute;inset:14px 16px 26px;z-index:1;pointer-events:none;color:#e8e8e8;opacity:.5;transition:opacity .25s;filter:drop-shadow(0 0 6px #ffffff40)}
.cv .on .saver{opacity:0}
.saver i,.saver b,.saver u{position:absolute;display:block}
/* files: a grid of files syncing one by one */
.sv-files{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:8px;inset:18px 22% 30px}
.sv-files i{position:static;border-radius:3px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.35;animation:svSync 4.8s steps(1) infinite;animation-delay:calc(var(--n)*.2s)}
@keyframes svSync{0%{background:currentColor;opacity:1}8%{background:none;opacity:.35}}
/* media and chat: bars */
.sv-media,.sv-chat{display:flex;align-items:center;gap:3px}
.sv-media i,.sv-chat i{position:static;flex:1;height:var(--h);border-radius:2px;background:currentColor;transform-origin:center;animation:svWave 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.07s)}
@keyframes svWave{from{transform:scaleY(.25)}}
.sv-chat{align-items:flex-end;gap:6px;inset:16px 16px 30px}
.sv-chat i{transform-origin:bottom;opacity:.85;animation:svBar 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.31s)}
@keyframes svBar{from{transform:scaleY(.35)}}
.sv-chat::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;opacity:.5}
/* archiver: lines are written, then fly into the bookmark */
.sv-arch i{left:0;top:calc(14% + var(--n)*16%);height:4px;width:var(--w);max-width:70%;border-radius:2px;background:currentColor;transform-origin:left;animation:svLine 5s var(--e) infinite;animation-delay:calc(var(--n)*.35s)}
@keyframes svLine{0%{transform:scaleX(0);opacity:1}25%{transform:none;opacity:1}60%{transform:translateX(0);opacity:1}80%{transform:translateX(160%) scaleX(.1);opacity:0}100%{opacity:0}}
.sv-arch b{right:4%;top:6%;width:34px;height:46px;background:currentColor;-webkit-mask:linear-gradient(#000 0 0);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);animation:svBook 5s ease infinite}
@keyframes svBook{70%,100%{transform:none}78%{transform:scale(1.12)}}
/* vod: packets run down three branches */
.sv-vod svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sv-vod .br{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.45}
.sv-vod .src{fill:currentColor}
.sv-vod .dst{fill:none;stroke:currentColor;stroke-width:1.5}
.sv-vod .pk{fill:currentColor}
/* key: a radar looking for the key */
.sv-key i{left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;animation:svPing 3s ease-out infinite;animation-delay:calc(var(--n)*1s)}
@keyframes svPing{from{transform:scale(.3);opacity:1}to{transform:scale(3.4);opacity:0}}
.sv-key b{left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.sv-key u{left:50%;top:50%;width:46%;height:1.5px;transform-origin:left;background:linear-gradient(90deg,currentColor,#fff0);animation:svSweep 3s linear infinite}
@keyframes svSweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.saver *{animation:none!important}}
.sv-chat{inset:16px 16px 36px}
.sv-key u{width:min(26%,90px)}
.sv-arch{inset:16px 18px 34px}

/* ?cards=13: the terminal alone — the whole card is one screen in a thin body */
.cv13 .dev{display:block;height:100%}
.cv13 .scr{height:100%!important;min-height:0;border-radius:18px;box-shadow:inset 0 0 0 1px #ffffff1c,inset 0 1px 0 #ffffff2e,inset 0 0 60px #000,0 40px 60px -26px #000}
.cv13 .pic{opacity:1}
.cv13 .glyph{position:relative;flex:1;min-height:0;display:block}
.cv13 .glyph .art{position:absolute;inset:10px 0;margin:0;color:#e8e8e8}
.cv13 .glyph .art::before{display:none}
.cv13 .glyph .art svg{max-height:128px;opacity:.6;transition:opacity .4s,filter .5s}
.cv13 .on .glyph .art svg{opacity:1;filter:drop-shadow(0 0 16px #ffffff66)}
.cv13 .out{flex:none;justify-content:flex-start}
.cv13 .on .out{justify-content:flex-end}
.cv13 .idle{display:none}
.cv13 .pic::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(#fff0,#ffffff14 80%,#ffffff40 99%,#fff0);transform:translateY(-100%)}
.cv13 .on .pic::before{animation:sweep .7s cubic-bezier(.4,0,.6,1) both}
@keyframes sweep{0%{opacity:1;transform:translateY(-100%)}100%{opacity:1;transform:translateY(340%)}}
.cv13 .tl:first-child{font-weight:700;font-size:15px}
@media (max-width:900px){
  .cv13 .dev{height:118px}
  .cv13 .pic{display:grid;grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:auto 1fr;grid-template-areas:"h g" "o g"}
  .cv13 .sh{grid-area:h}.cv13 .out{grid-area:o}.cv13 .glyph{grid-area:g}
  .cv13 .glyph .art{inset:8px 6px}
  .cv13 .glyph .art svg{max-height:52px;opacity:1;filter:drop-shadow(0 0 10px #ffffff4d)}
}

/* ===== terminal cards, refined (03.11) ===== */
.cv13 .scr{background:radial-gradient(130% 110% at 50% 45%,#0b0b0b,#050505 60%,#000 100%);
  box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff33,inset 0 0 0 7px #0a0a0b,inset 0 0 0 8px #ffffff0d,inset 0 0 80px #000,0 40px 70px -28px #000;
  transition:box-shadow .6s var(--e),translate .6s var(--e)}
.cv13 .on .scr{translate:0 -4px;box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 1px 0 #ffffff47,inset 0 0 0 7px #0a0a0b,inset 0 0 0 8px #ffffff14,inset 0 0 80px #000,0 0 60px -20px #ffffff26,0 50px 80px -30px #000}
/* glass: a soft reflection across the top-left, the tube's curve darkens the corners */
.cv13 .scr::after{background:linear-gradient(155deg,#ffffff12,#fff0 32%),radial-gradient(120% 100% at 50% 50%,#0000 62%,#000b)!important}
/* a slow rolling band, the only motion at rest */
.cv13 .pic::after{content:"";position:absolute;left:0;right:0;top:-30%;height:26%;z-index:2;pointer-events:none;background:linear-gradient(#fff0,#ffffff07 50%,#fff0);animation:roll 9s linear infinite}
@keyframes roll{to{transform:translateY(520%)}}
@media (prefers-reduced-motion:reduce){.cv13 .pic::after{animation:none;display:none}}
.cv13 .pic{padding:8px 10px 6px}
.cv13 .sh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px 0;color:#757575}
.cv13 .sh .kd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.cv13 .sh .no{color:#c9c9c9;font-weight:700}
.cv13 .sh .dots{letter-spacing:.2em;color:#4a4a4a}
/* the mark rests large and soft, steps back and brightens when the screen wakes */
.cv13 .glyph .art svg{transition:opacity .4s,filter .5s,scale .7s var(--e),translate .7s var(--e)}
.cv13 .on .glyph .art svg{scale:.78;translate:0 -6%}
.cv13 .out{padding:4px 12px 14px;font-size:13.5px}
.cv13 .tl:first-child{font-size:16px;letter-spacing:-.01em}
.cv13 .tl.dim{font:400 14px/1.45 var(--sans);color:#a3a3a3}
.cv13 .tl.ok{color:#f3f3f3}
.cv13 .tl.hint{color:#c9c9c9;margin-top:4px}
.cv13 .on .tl.hint{animation:hintGlow 1.6s ease-in-out .2s infinite alternate}
@keyframes hintGlow{to{text-shadow:0 0 10px #ffffffa0;color:#fff}}
@media (min-width:900.02px){.cv13 .out{font-size:14px}.cv13 .tl:first-child{font-size:18px}}
.red .cv13 .sh .no,.red .cv13 .tl.hint{color:#ff3b52}

/* ===== demo polish (04.11) ===== */
/* rounded boxes with an animated child: while the child is on its own layer the plain overflow clip can drop the
   corners (square during the fill, round again at the end); a clip-path keeps them round the whole time */
.fb-get{clip-path:inset(0 round 12px)}
.kx-main{clip-path:inset(0 round 16px 0 0 16px)}
.fb-pic{clip-path:inset(0 round 18px 18px 6px 18px)}
.fb-album{clip-path:inset(0 round 12px)}
/* the recipient's view holds a single message: it sits in the middle of the card, not on the chat's left side */
.fb-gift.fb-msg.bot{align-self:center;margin-inline:auto}
@media (min-width:900.02px){
  .feat .shots .ui,.boost .feat .shots .ui{transform:translate3d(calc(var(--s,1)*28px),0,0);transition:opacity .22s ease,transform .32s cubic-bezier(.4,0,1,1),visibility 0s .32s}
  .feat .shots .ui.on,.boost .feat .shots .ui.on{transform:none;transition:opacity .34s ease .14s,transform .5s cubic-bezier(.2,.75,.25,1) .14s}
}

/* 04.11: demo cards stay on their own layer at rest too. The layer used to be dropped when the slide ended and the card
   snapped to the whole pixel, a 1-2px hop up at the very end */
@media (min-width:900.02px){
  .feat .shots .ui,.boost .feat .shots .ui{will-change:transform,opacity;backface-visibility:hidden}
  .feat .shots .ui.on,.boost .feat .shots .ui.on{transform:translate3d(0,0,0)}
}
/* the frame's scroll reveal ends in a long sub-pixel tail; kept on its layer it settles without the final hop */
.feat .shots.rv{will-change:translate,opacity}
/* the fill grows as a rounded bar, its leading edge is as round as the button */
.ui.play .fb-get u{animation:fbFillR 1s cubic-bezier(.45,0,.25,1) 1.05s both}
@keyframes fbFillR{from{clip-path:inset(0 100% 0 0 round 12px)}to{clip-path:inset(0 0 0 0 round 12px)}}
.fb-get u{transform:none}
.js .ui:not(.play) .fb-get u{transform:none;clip-path:inset(0 100% 0 0 round 12px)}
/* the same hop on the pieces that rise in inside a card: their layers stay while the panel plays (desktop only, phones are kept light) */
@media (min-width:900.02px){.ui.play :is(.ia,.beat,.kx-sat,.ui-sat){will-change:transform,opacity}}

/* Interruptible demo handoffs: the outgoing scene is gone before its contents reset. */
@media (min-width:900.02px){
  .feat .shots .ui,.boost .feat .shots .ui{
    transform:translate3d(calc(var(--s,1)*32px),0,0);
    transition:opacity .12s linear,transform .24s cubic-bezier(.23,1,.32,1),visibility 0s .16s;
  }
  .feat .shots .ui.on,.boost .feat .shots .ui.on{
    transform:translate3d(0,0,0);
    transition:opacity .18s linear .08s,transform .28s cubic-bezier(.23,1,.32,1) .06s;
  }
  .feat .steps::before{transition-duration:.28s}
  /* Reserve the terminal's two zones so typed lines never move the emblem. */
  .cv13 .glyph{flex:0 0 40%}
  .cv13 .out,.cv13 .on .out{flex:1 1 0;min-height:0;justify-content:flex-start}
}
/* Keep the phosphor response, remove the inherited whole-screen flicker. */
.cv13 .act .scr{animation:none}
.cv13 .scr{transition:translate .24s cubic-bezier(.23,1,.32,1),box-shadow .24s ease}
.cv13 .glyph .art svg{transition:opacity .2s,filter .24s,scale .28s cubic-bezier(.23,1,.32,1),translate .28s cubic-bezier(.23,1,.32,1)}
.cv13 .on .tl.hint{animation:hintGlow .45s ease-out both}
.feat.tab-away .steps::before{animation-play-state:paused!important}
.feat .note{transition:opacity .12s linear,transform .24s cubic-bezier(.23,1,.32,1),visibility 0s .16s}
.feat .note.on{transition:opacity .18s linear .08s,transform .28s cubic-bezier(.23,1,.32,1) .06s}
.feat .step.on span{text-shadow:0 0 12px #ffffff50}
@media (prefers-reduced-motion:no-preference){
  .ui-cmds button,.ui-chips button,.ui-input button{transition:scale .16s cubic-bezier(.23,1,.32,1),background .2s,color .2s}
  .ui-cmds button:active,.ui-chips button:active,.ui-input button:active{scale:.97}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .feat .step{transition:scale .16s cubic-bezier(.23,1,.32,1),color .2s,background .2s}
  .feat .step:active{scale:.97}
}
@media (prefers-reduced-motion:reduce){
  .feat .shots .ui,.boost .feat .shots .ui,
  .feat .shots .ui.on,.boost .feat .shots .ui.on{transform:none;transition:opacity .15s linear!important}
  .cv13 .on .scr,.cv13 .on .glyph .art svg{translate:none;scale:1}
}
/* commands read from the top: a two-line hint no longer lifts its command above the row */
.ui-cmds button{justify-content:flex-start}
/* badges sit inside the card's corner, nothing sticks out past its edge */
.ui-sat.tr,.feat .shots .ui-sat.tr{top:16px;right:16px}
@media (max-width:900px){.ui-sat.tr,.feat .shots .ui-sat.tr{top:12px;right:12px}}
@media (hover:none){.ui-cmds button:hover small{color:var(--ash)}}
/* proxy demo: the badge, the shackle and the code dots settle without bouncing back; the stamp keeps a small press */
.ui.play .kx-sat,.ui.play .kx-arc,.ui.play .kx-code i{animation-timing-function:var(--e)}
.ui.play .kx-stamp{animation-timing-function:cubic-bezier(.3,1.2,.5,1)}
/* the demo frame only fades in on arrival: its own rise stacked on the panel's entrance and the scene */
.js .feat .shots.rv{translate:none}
/* phone badges: smaller; on the narrowest screens only the tick, so they never cover a heading */
@media (max-width:900px){.ui-sat.tr,.feat .shots .ui-sat.tr{padding:6px 11px 6px 9px;font-size:12px;gap:6px}.ui-sat .ic{width:14px;height:14px}}
@media (max-width:360px){.ui-sat.tr{width:28px;height:28px;padding:0;justify-content:center;gap:0;font-size:0}}

/* ===== motion pass (04.11, evening): one curve, short tails, nothing creeps ===== */
/* --out was an expo curve: most of its time went to a sub-pixel crawl at the end, the "it stops and slides a bit more"
   the user saw. Both site curves now share one strong ease-out that lands cleanly. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--out:var(--ease-out);--e:var(--ease-out)}
/* scroll reveal: once, a short rise; opacity leads so the block is readable before it stops */
@media (prefers-reduced-motion:no-preference){.js .rv:not(.in-v){translate:0 16px}}
.js .rv{transition:opacity .5s var(--ease-out) var(--rv,0s),translate .7s var(--ease-out) var(--rv,0s),color .45s,box-shadow .5s,transform var(--tf,.6s) var(--ease-out)}
/* headings: letters rise out of their line a little quicker */
.js .big.ready .ch>b{transition:transform .7s var(--ease-out);transition-delay:calc(var(--c)*24ms)}
/* press feedback on desktop too (phones already have it) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .feat .link{transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s,scale .16s var(--ease-out)}
  .feat .link:active,.tile:active{scale:.97}
  .js .tile.rv{transition:opacity .5s var(--ease-out) var(--rv,0s),translate .7s var(--ease-out) var(--rv,0s),color .45s,box-shadow .5s,scale .16s var(--ease-out)}
}

/* ===== demo slides: the 03.11 slide is back (user, 04.11 evening); later short handoffs are overridden here ===== */
/* literal curves: --e was redefined in the motion pass, the slide keeps its own */
@media (min-width:900.02px){
  .feat .shots .ui,.boost .feat .shots .ui{transform:translate3d(calc(var(--s,1)*80px),0,0) scale(.96);transition:opacity .24s ease,transform .5s cubic-bezier(.4,0,.6,1),visibility 0s .5s}
  .feat .shots .ui.on,.boost .feat .shots .ui.on{transform:translate3d(0,0,0);transition:opacity .4s ease .16s,transform .8s cubic-bezier(.22,.8,.24,1) .16s}
  .feat .shots .ui.on .ia{animation-delay:calc(var(--t,0s) + .12s)}
  .feat .steps::before{transition:transform .65s cubic-bezier(.16,1,.3,1)}
}
@media (min-width:900.02px) and (prefers-reduced-motion:reduce){
  .feat .shots .ui,.boost .feat .shots .ui,.feat .shots .ui.on,.boost .feat .shots .ui.on{transform:none;transition:opacity .15s linear}
}
/* gothchat: the bars grow once their block has started to rise */
@media (min-width:900.02px){.ui.play .ui-chart i{animation-delay:calc(.3s + var(--n)*22ms)}}
/* the command block rises as one, like gothfilebot's blocks: no second cascade inside it */
@media (min-width:900.02px){.ui.play .ui-cmds button{animation:none}}
/* the cabinet button rises like the other blocks and still gets its press */
@media (min-width:900.02px){.feat .shots .ui.on.play .kx-go.ia{animation:dRise .6s var(--e) calc(var(--t,0s) + .12s) both,kxPress .3s ease calc(var(--go,2.2s) - .15s)}}
/* gothchat and zavetkeybot cards carried the old .pop entrance on the card itself: it was off only while the panel
   was .on, so the leaving card replayed it and blinked. Desktop demo cards never pop now, like gothfilebot. */
@media (min-width:900.02px){.feat .shots .ui .ui-card.pop{animation:none}}
/* the white sweep across a project card on hover is removed (user, 04.11) */
.cv13 .pic::before,.cv13 .on .pic::before{display:none;animation:none}

/* ===== project cards (04.11): nothing on the screen jumps in or out in one frame ===== */
@media (prefers-reduced-motion:no-preference){
  /* the description fades out before the features are typed, and fades back in once they are gone */
  .cv13 .tl.dim{transition:opacity .14s var(--ease-out)}
  .cv13 .hush .tl.dim{opacity:0}
  .cv13 .in:not(.typing):not(.hush) .tl.dim{animation:fadeIn .24s var(--ease-out) backwards}
  /* typed lines leave quickly instead of vanishing */
  .cv .scr .tl.gone{opacity:0;transition:opacity .16s var(--ease-out)}
}

/* ===== terminal variations, test only: ?term=2 window, ?term=3 bare line, ?term=4 crop marks (04.11) ===== */
/* shared: no CRT layer (scanlines, glass, rolling band, glow) */
:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv .scr::before,:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv .scr::after,:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv13 .pic::after{display:none}
:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv .tl{text-shadow:none}
:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv .scr .cur{box-shadow:none}
:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv13 .on .tl.hint{animation:none}
:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv13 .glyph .art svg,:is(.tv2,.tv3,.tv4,.tv5,.tv6,.tv7,.tv8).cv13 .on .glyph .art svg{filter:none}

/* 2 · window: a modern terminal app, matte panel with a title bar */
.tv2.cv13 .scr{background:#0c0c0d;border-radius:14px;box-shadow:inset 0 0 0 1px #ffffff17,0 30px 60px -30px #000}
.tv2.cv13 .on .scr{box-shadow:inset 0 0 0 1px #ffffff30,0 40px 70px -30px #000}
.tv2.cv13 .pic{padding:0}
.tv2.cv13 .sh{padding:11px 14px;border-bottom:1px solid #ffffff14;background:#ffffff0b;color:#8a8a8a}
.tv2.cv13 .sh .dots{color:#5a5a5c;letter-spacing:.15em;font-size:10px}
.tv2.cv13 .on .sh .dots{color:#8a8a8a;transition:color .2s}
.tv2.cv13 .glyph .art svg{opacity:.8}
.tv2.cv13 .on .glyph .art svg{opacity:1}
.tv2.cv13 .out{padding:6px 16px 16px}

/* 3 · bare line: no box at all, a hairline on top that lights up, the prompt does the talking */
.tv3.cv13 .scr,.tv3.cv13 .on .scr{background:linear-gradient(#000000c0,#00000080);border-radius:0;box-shadow:inset 0 1px 0 #ffffff26;translate:none}
.tv3.cv13 .scr{transition:box-shadow .2s var(--ease-out)}
.tv3.cv13 .on .scr{box-shadow:inset 0 1px 0 #ffffffd9}
.tv3.cv13 .pic{padding:0 2px}
.tv3.cv13 .sh{padding:14px 0 0}
.tv3.cv13 .sh .dots{display:none}
.tv3.cv13 .sh{grid-template-columns:minmax(0,1fr) auto}
.tv3.cv13 .sh .kd{text-align:left}
.tv3.cv13 .glyph .art svg{opacity:.45}
.tv3.cv13 .on .glyph .art svg{opacity:1}
.tv3.cv13 .out{padding:4px 2px 14px}
@media (min-width:900.02px){.tv3.cv13 .tl:first-child{font-size:22px}}

/* 4 · crop marks: four corner brackets frame the screen and close in on hover */
.tv4.cv13 .scr{background:#070707;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff0d}
.tv4.cv13 .on .scr{translate:none;box-shadow:inset 0 0 0 1px #ffffff14}
.tv4.cv .scr::before{display:block;inset:0;opacity:.35;transform:scale(.965);
  background:linear-gradient(#fff,#fff) 0 0/16px 1px,linear-gradient(#fff,#fff) 0 0/1px 16px,linear-gradient(#fff,#fff) 100% 0/16px 1px,linear-gradient(#fff,#fff) 100% 0/1px 16px,
    linear-gradient(#fff,#fff) 0 100%/16px 1px,linear-gradient(#fff,#fff) 0 100%/1px 16px,linear-gradient(#fff,#fff) 100% 100%/16px 1px,linear-gradient(#fff,#fff) 100% 100%/1px 16px;
  background-repeat:no-repeat;transition:opacity .2s ease,transform .28s var(--ease-out)}
.tv4.cv13 .on .scr::before{opacity:1;transform:scale(1)}
.tv4.cv13 .sh .dots{display:none}
.tv4.cv13 .sh{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px 0}
.tv4.cv13 .sh .kd{text-align:left}
.tv4.cv13 .sh .kd::before{content:"[ "}.tv4.cv13 .sh .kd::after{content:" ]"}
.tv4.cv13 .glyph .art svg{opacity:.6}
.tv4.cv13 .on .glyph .art svg{opacity:1}
.tv4.cv13 .out{padding:4px 16px 16px}

/* ===== ?term=4 ideas, each on its own: &f=1..6 (04.11) ===== */
/* f1 · the mark comes into focus as the brackets close */
.tv4.f1.cv13 .glyph .art svg{filter:blur(2.5px);opacity:.5}
.tv4.f1.cv13 .on .glyph .art svg{filter:blur(0);opacity:1}
/* f2 · the brackets also grow, 16 → 26px, when they close */
.tv4.f2.cv .scr::before{transition:opacity .2s ease,transform .28s var(--ease-out),background-size .28s var(--ease-out)}
.tv4.f2.cv13 .on .scr::before{background-size:26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px}
/* f3 · on arrival the brackets draw themselves out of the corners once */
.tv4.f3.cv13 .in-v .scr::before{animation:crDraw .7s var(--ease-out) .25s backwards}
@keyframes crDraw{from{background-size:0 1px,1px 0,0 1px,1px 0,0 1px,1px 0,0 1px,1px 0;opacity:1}}
/* f4 · phones: the card in the middle of the screen is in focus (same look as hover on desktop) */
.tv4.f4.cv13 .focus .scr::before{opacity:1;transform:scale(1)}
.tv4.f4.cv13 .scr::before{transition:opacity .3s ease,transform .4s var(--ease-out)}
.tv4.f4.cv13 .focus .glyph .art svg{opacity:1}
/* f5 · a viewfinder crosshair over the mark (inverts what is under it), it closes in and fades once in focus */
.tv4.f5.cv13 .glyph::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:150px;height:150px;translate:-50% -50%;pointer-events:none;opacity:.45;
  background:linear-gradient(#fff,#fff) 50% 0/1px 18px no-repeat,linear-gradient(#fff,#fff) 50% 100%/1px 18px no-repeat,linear-gradient(#fff,#fff) 0 50%/18px 1px no-repeat,linear-gradient(#fff,#fff) 100% 50%/18px 1px no-repeat;
  transition:opacity .22s ease,scale .28s var(--ease-out)}
.tv4.f5.cv13 .on .glyph::after{opacity:0;scale:.7}
/* f6 · the label's brackets step apart with the frame */
.tv4.f6.cv13 .sh .kd{padding-inline:6px;margin-inline:-6px}
.tv4.f6.cv13 .sh .kd::before{content:"[\00a0"}.tv4.f6.cv13 .sh .kd::after{content:"\00a0]"}
.tv4.f6.cv13 .sh .kd::before,.tv4.f6.cv13 .sh .kd::after{display:inline-block;transition:translate .28s var(--ease-out),color .2s}
.tv4.f6.cv13 .on .sh .kd::before{translate:-4px 0;color:#fff}
.tv4.f6.cv13 .on .sh .kd::after{translate:4px 0;color:#fff}
@media (prefers-reduced-motion:reduce){.tv4.f3.cv13 .in-v .scr::before{animation:none}}

/* ===== test ?bg=moon|fog|trees: a video behind the first screen (04.11) ===== */
.bgv{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--void);will-change:opacity}
.bgv video{display:block;width:100%;height:100%;object-fit:cover}
/* the name stays readable on the left, the bottom melts into the page */
.bgv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#040404d0 0%,#04040480 34%,#04040400 62%),linear-gradient(#04040400 58%,#040404 100%)}
@media (max-width:900px){.bgv::after{background:linear-gradient(#04040440 0%,#04040400 30%,#040404b0 62%,#040404 100%)}}
.bgv-moon .bgv video{opacity:.62}
.bgv{animation:fadeIn 1.4s ease .1s both}
.intro:not(.intro-on) .bgv{animation-play-state:paused}
@media (min-width:900.02px){.bgv-moon .bgv video{transform:translateX(14%) scale(1.3)}}

/* ===== more terminal variations, test only: ?term=5 DOS frame, 6 tmux bar, 7 blueprint grid, 8 frosted glass (04.11) ===== */
/* 5 · DOS frame: a double line inside the screen, the type sits in the top line like a window title */
.tv5.cv13 .scr{background:#070707;border-radius:0;box-shadow:none;outline:3px double #ffffff38;outline-offset:-9px;transition:outline-color .2s ease}
.tv5.cv13 .on .scr{translate:none;outline-color:#ffffffd9}
.tv5.cv13 .pic{padding:24px 20px 16px}
.tv5.cv13 .sh{position:absolute;z-index:3;top:1px;left:0;right:0;display:flex;justify-content:center;padding:0}
.tv5.cv13 .sh .dots{display:none}
.tv5.cv13 .sh .kd{max-width:calc(100% - 48px);padding:0 10px;background:#070707;text-align:center;transition:color .2s}
.tv5.cv13 .on .sh .kd{color:#fff}

/* 6 · tmux: no title on top, a status bar along the bottom with a session chip that lights up */
.tv6.cv13 .scr{background:#0a0a0a;border-radius:6px;box-shadow:inset 0 0 0 1px #ffffff14}
.tv6.cv13 .on .scr{translate:none;box-shadow:inset 0 0 0 1px #ffffff2a}
.tv6.cv13 .pic{padding:0}
.tv6.cv13 .glyph .art{inset:18px 0 6px}
.tv6.cv13 .out{padding:4px 16px 12px}
.tv6.cv13 .sh{order:9;margin-top:auto;padding:5px 10px 5px 0;background:#161617;box-shadow:0 -1px 0 #ffffff12;color:#8a8a8a}
.tv6.cv13 .sh .dots{font-size:0;letter-spacing:0}
.tv6.cv13 .sh .dots::before{content:"zg";display:inline-block;padding:1px 8px;font-size:11px;letter-spacing:.06em;color:#bdbdbd;background:#2a2a2c;transition:background .2s,color .2s}
.tv6.cv13 .on .sh .dots::before{background:#d9d9d9;color:#0a0a0a}

/* 7 · blueprint: a faint drafting grid on the screen that comes up on hover, square corners, hairline */
.tv7.cv13 .scr{background:#060606;border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff21;transition:box-shadow .2s ease}
.tv7.cv13 .on .scr{translate:none;box-shadow:inset 0 0 0 1px #ffffff47}
.tv7.cv .scr::before{display:block;opacity:.45;background:linear-gradient(#ffffff0d 1px,#0000 1px) 0 0/16px 16px,linear-gradient(90deg,#ffffff0d 1px,#0000 1px) 0 0/16px 16px;transition:opacity .25s ease}
.tv7.cv13 .on .scr::before{opacity:1}
.tv7.cv13 .sh .dots{display:none}
.tv7.cv13 .sh{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px 0}
.tv7.cv13 .sh .kd{text-align:left}
.tv7.cv13 .out{padding:4px 16px 16px}

/* 8 · frosted glass: the waves behind show through, softly blurred (desktop only; phones get a solid panel) */
.tv8.cv13 .scr{background:#ffffff09;border-radius:20px;box-shadow:inset 0 0 0 1px #ffffff1c,inset 0 1px 0 #ffffff30,0 30px 60px -30px #000;transition:background-color .25s ease,box-shadow .25s ease}
@media (min-width:900.02px) and (hover:hover){.tv8.cv13 .scr{-webkit-backdrop-filter:blur(14px) saturate(0);backdrop-filter:blur(14px) saturate(0)}}
@media (max-width:900px),(hover:none){.tv8.cv13 .scr{background:#121213}}
.tv8.cv13 .on .scr{translate:none;background-color:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff38,inset 0 1px 0 #ffffff4d,0 40px 70px -30px #000}
.tv8.cv13 .sh .dots{display:none}
.tv8.cv13 .sh{grid-template-columns:minmax(0,1fr) auto;padding:14px 18px 0}
.tv8.cv13 .sh .kd{text-align:left}
.tv8.cv13 .out{padding:4px 18px 18px}

.bgv-credit{margin:0 auto;padding:0 var(--gr) calc(16px + env(safe-area-inset-bottom,0px)) var(--gl);text-align:center;font-size:12px;color:#6f6f6c}
.bgv-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bgv-credit a:hover{color:#bdbdbd}
.bgv-onda .bgv video{opacity:.7}

/* ===== test ?look=glass (04.11): the first half of the site in the language of terminals 8 + 3 =====
   one glass recipe (frosted, desaturated, a hairline rim and a lit top edge) and hairlines that light up on hover */
.lk-glass{--glass:#ffffff09;--glass-on:#ffffff12;--rim1:#ffffff1c;--rim-top:#ffffff30}
/* project cards: glass of 8, the top edge of 3 lights up on hover; the name is set larger, as in 3 */
.lk-glass.cv13 .on .scr{box-shadow:inset 0 0 0 1px #ffffff38,inset 0 1px 0 #ffffffd9,0 40px 70px -30px #000}
@media (min-width:900.02px){.lk-glass.cv13 .tl:first-child{font-size:22px}}
/* menu and language switch: the same glass */
.lk-glass .nav nav{background:var(--glass);box-shadow:inset 0 0 0 1px var(--rim1),inset 0 1px 0 var(--rim-top),0 20px 40px -24px #000}

@media (min-width:900.02px) and (hover:hover){
  .lk-glass .nav nav{-webkit-backdrop-filter:blur(14px) saturate(0);backdrop-filter:blur(14px) saturate(0)}
}
@media (max-width:900px),(hover:none){.lk-glass .nav nav{background:#121213f2}}
/* under the name: the stack sits between two hairlines, like the bare terminal */
.lk-glass .u-icons{padding-block:18px;border-block:1px solid #ffffff17}
.lk-glass .u-text{margin-bottom:4px}

/* ===== test ?h=1..4 (04.11): section headings without the halftone ===== */
:is(.hd1,.hd2,.hd4) :is(.work,.how) .big,.hd3 .work .big{color:#f2f2ee}
/* 1 · solid: the same face in solid letters, a soft glow like the logo's */
.hd1 :is(.work,.how) .big{font-size:clamp(56px,9vw,150px);text-shadow:0 0 28px #ffffff24}
/* 2 · glass letters: a thin rim and a faint frosted fill, like the glass cards */
.hd2 :is(.work,.how) .big{font-size:clamp(64px,10.5vw,176px)}
.hd2 :is(.work,.how) .big .ch>b{color:transparent;-webkit-text-stroke:1.4px #ffffffd0;background:linear-gradient(#ffffff5c,#ffffff14 75%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px #ffffff1f)}
/* 3 · terminal: ~/name in mono, typed letter by letter, a blinking block cursor */
.hd3 .work .big{font:600 clamp(40px,5.6vw,86px)/1.1 var(--mono,monospace);text-transform:lowercase;letter-spacing:-.02em;text-shadow:0 0 14px #ffffff40}
.hd3 .work .big::before{content:"~/";color:#8a8a8a}
.hd3 .work .big::after{content:"";display:inline-block;width:.55em;height:.9em;margin-left:.08em;vertical-align:-.08em;background:#f2f2ee;box-shadow:0 0 10px #fff8;animation:blink 1s steps(2) infinite}
/* typed for real: a letter takes its place only when it is typed, so the cursor walks along; it blinks once done */
.js.hd3 .work .big.ready .ch>b{transform:none}
.js.hd3 .work .big.ready:not(.typed) .ch:not(.t){display:none}
.js.hd3 .work .big.ready:not(.typed)::after{animation:none}
/* 4 · number and line: a hairline across the section draws out from the middle, the section number sits on it */
.hd4 :is(.work,.how) .big{font-size:clamp(56px,9vw,150px)}
.hd4 :is(.work,.how) .head{position:relative;padding-top:44px}
.hd4 :is(.work,.how) .head::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:#ffffff2e;transform:scaleX(0);transition:transform 1s var(--ease-out)}
.hd4 :is(.work,.how) .head:has(.big.in-v)::before{transform:scaleX(1)}
.hd4 :is(.work,.how) .head::after{position:absolute;left:50%;top:0;translate:-50% 0;padding:3px 12px;background:var(--void);font:500 13px/18px var(--mono,monospace);letter-spacing:.16em;color:#bdbdbd;opacity:0;transition:opacity .4s ease .5s}
.hd4 .work .head::after{content:"01"}.hd4 .how .head::after{content:"02"}
.hd4 :is(.work,.how) .head:has(.big.in-v)::after{opacity:1}
@media (prefers-reduced-motion:reduce){.hd3 .work .big::after{animation:none}}
/* ?h=3 terminal: the line under the name answers a command, like the heading and the cards */
.hd3 .u-text{font:500 clamp(15px,1.3vw,18px)/1.5 var(--mono,monospace);letter-spacing:0;color:#e8e8e8;text-shadow:0 0 12px #ffffff30,0 0 12px var(--void)}
.hd3 .u-text::before{content:"~$ whoami";display:block;margin-bottom:2px;color:#8a8a8a;font-size:.85em}
.lang-en.hd3 .u-text{text-transform:lowercase}
.hd3 .u-text{text-transform:lowercase}

/* ===== ?look=glass&h=3, more of the terminal (04.11) ===== */
/* 3 · lower half: demo cards and contact rows wear the same glass rim (no backdrop blur: the demos move all the time) */
.lk-glass .feat .shots .ui-card,.lk-glass.boost .feat .shots .ui-card{background:radial-gradient(90% 55% at 50% -8%,#ffffff12,#fff0 70%),#0c0c0ee6;box-shadow:inset 0 0 0 1px var(--rim1),inset 0 1px 0 var(--rim-top),0 48px 90px -36px #000}
/* ?h=3: the section name is quiet, the same grey as its ~/; the cursor is dimmed with it */
.hd3 .work .big{color:#8a8a8a;text-shadow:none}
.hd3 .work .big::before{color:#8a8a8a}
.hd3 .work .big::after{background:#8a8a8a;box-shadow:none}
/* the smaller heading no longer spaces the sections by its own height: room between sections and under headings */
.hd3 .work .head{margin-bottom:clamp(44px,8vh,88px)}
@media (max-width:900px){.hd3 .work .head{margin-bottom:44px}}

/* ===== ?h=3: only Projects is a terminal; How it works keeps its halftone title (04.11) ===== */
/* test ?pf=1..4: a finer face for ~/проекты (all OFL, served from our own fonts/) */
@font-face{font-family:PFmartian;src:url(fonts/pf-martian-cyrillic.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:PFmartian;src:url(fonts/pf-martian-latin.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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:PFplex;src:url(fonts/pf-plex-cyrillic.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:PFplex;src:url(fonts/pf-plex-latin.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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:PFvictor;src:url(fonts/pf-victor-cyrillic.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:PFvictor;src:url(fonts/pf-victor-latin.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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:PFgeist;src:url(fonts/pf-geist-cyrillic.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:PFgeist;src:url(fonts/pf-geist-latin.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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.pf1 .work .big{--pf:PFmartian}
.pf2 .work .big{--pf:PFplex;font-style:italic}
.pf3 .work .big{--pf:PFvictor;font-style:italic}
.pf4 .work .big{--pf:PFgeist}
:is(.pf1,.pf2,.pf3,.pf4).hd3 .work .big{font-family:var(--pf),var(--mono,monospace);font-weight:500}
.pf1.hd3 .work .big{letter-spacing:-.04em;font-size:clamp(34px,4.6vw,72px)}
:is(.pf2,.pf3).hd3 .work .big{letter-spacing:-.03em}
.pf2.hd3 .work .big::before,.pf3.hd3 .work .big::before{font-style:normal}

/* ?h=3: Martian Mono is the chosen face for ~/проекты (?pf=2..4 still compare others) */
.hd3:not(.pf2):not(.pf3):not(.pf4) .work .big{--pf:PFmartian;font-family:PFmartian,var(--mono,monospace);font-weight:500;letter-spacing:-.04em;font-size:clamp(34px,4.6vw,72px)}
/* ?h=3: a little more room around the halftone How it works title (the cards above sat too close) */
.hd3 .how{padding-top:clamp(56px,11vh,120px)}
.hd3 .how .head{margin-bottom:clamp(44px,8vh,88px)}
@media (max-width:900px){.hd3 .how{padding-top:56px}.hd3 .how .head{margin-bottom:44px}}

/* ===== design pass 05.11 (agreed with Codex): one grey scale, readable captions, one glass edge, no new motion ===== */
:root{--t1:#f2f2f0;--t2:#bcbcba;--t3:#8c8c8a;--rim1:#ffffff1c;--rim-top:#ffffff30;--rim-on:#ffffff3d}
/* project cards: type label, prompt and description on the scale, the description a step larger */
.cv13 .sh .kd{color:var(--t3);font-size:11.5px;letter-spacing:.08em}
.cv13 .tl .pr{color:var(--t3)}
.cv13 .tl.dim{color:var(--t2)}
@media (min-width:900.02px){.cv13 .tl.dim{font-size:15px;line-height:1.5}}
/* a quiet "how it is built" line at the bottom of every card that has its own page; part of the card link, no extra Tab stop */
.cv13 .work .in[href$=".html"] .out::after{content:"как устроено →";margin-top:auto;padding-top:14px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--t3);transition:color .2s ease,opacity .2s ease}
.lang-en.cv13 .work .in[href$=".html"] .out::after{content:"how it is built →"}
.cv13 .work .in[href$=".html"]:hover .out::after{color:var(--t1)}
/* phones: the compact card has a fixed height and reads as one big button, the line would need a taller card, so it is left out */
@media (max-width:900px){.cv13 .work .in[href$=".html"] .out::after{content:none}}
/* keyboard focus: one clear outer ring everywhere, following the rounding */
:focus-visible{outline:2px solid var(--t1);outline-offset:4px}
.work .in:focus-visible{outline:none}
.cv13 .work .in:focus-visible .scr{outline:2px solid var(--t1);outline-offset:4px}
.tile:focus-visible,.step:focus-visible,.f-text .link:focus-visible,.nav a:focus-visible{outline:2px solid var(--t1);outline-offset:3px}
/* demo texts: bot label, intro, tabs */
.boost .who,.f-text .who{font-size:13px;letter-spacing:.04em;color:var(--t3)}
.f-text>p:not(.who){color:var(--t2)}
@media (min-width:900.02px){.boost .feat .step{color:var(--t2)}.boost .feat .step.on,.boost .feat .step:hover{color:var(--t1)}}
/* contacts and footer */
.t-addr small{font-size:13px;letter-spacing:.02em;color:var(--t3)}
.tile .arr{color:var(--t3);transition:color .2s ease}
.tile:hover .arr{color:var(--t1)}
.foot{color:var(--t3);font-size:13px}
.bgv-credit{color:var(--t3)}
.bgv-credit a:hover{color:var(--t1)}
/* one glass edge: same recipe, different strength (menu lighter, cards standard, demo frames standard) */
.lk-glass .nav nav{box-shadow:inset 0 0 0 1px var(--rim1),inset 0 1px 0 var(--rim-top),0 20px 40px -24px #000}
.lk-glass .feat .shots .ui-card,.lk-glass.boost .feat .shots .ui-card{box-shadow:inset 0 0 0 1px var(--rim1),inset 0 1px 0 var(--rim-top),0 48px 90px -36px #000}
/* phone: the halftone "How it works" fits the width with air at the sides */
@media (max-width:560px){.how .big{font-size:calc((100vw - 60px)/4.75)}}
@media (max-width:900px){.cv13 .sh .kd{font-size:11px;letter-spacing:.04em}}
/* the active card keeps the same edge recipe, only a step stronger (the near-white top read as a second ring next to the focus ring) */
.lk-glass.cv13 .on .scr{box-shadow:inset 0 0 0 1px var(--rim-on),inset 0 1px 0 var(--rim-top),0 40px 70px -30px #000}
/* background tests 05.11: ?bg=smoke|wisp|ink (Mixkit Stock Video Free License: 50951, 50956, 510 inverted) */
.bgv-smoke .bgv video{opacity:.55}
.bgv-wisp .bgv video{opacity:.9}
.bgv-ink .bgv video{opacity:.36}
/* calm nature tests 05.11: ?bg=stars|rain|mist|peaks (Mixkit Free License: 1704, 18312, 28342, 4396) */
.bgv-stars .bgv video{opacity:.9}
.bgv-rain .bgv video{opacity:.5}
.bgv-mist .bgv video{opacity:.55}
.bgv-peaks .bgv video{opacity:.45}