/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/unbounded-latin.woff2) format('woff2');
  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;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/unbounded-latin.woff2) format('woff2');
  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;
}
body{margin:0;background:#FFF4E8;color:#2A1A10;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#2A1A10}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] summary .plus{transform:rotate(45deg)}
details p{animation:fu .4s both}
input:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid #2A1A10;outline-offset:3px}
.sr{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.sr:focus-visible + .drop{outline:3px solid #2A1A10;outline-offset:3px}

/* buttons */
.btn{display:inline-block;font-family:inherit;font-weight:700;font-size:16px;text-decoration:none;border:2px solid #2A1A10;border-radius:8px;padding:14px 22px;box-shadow:4px 4px 0 #2A1A10;transition:transform .15s,box-shadow .15s;cursor:pointer;text-align:center}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #2A1A10;color:#2A1A10}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #2A1A10}
.btn-o{background:#EC6C10;color:#2A1A10}
.btn-l{background:#FFFDF8;color:#2A1A10}
.btn-d{background:#2A1A10;color:#FFF4E8;box-shadow:4px 4px 0 #EC6C10}
.btn-d:hover{color:#FFF4E8;box-shadow:6px 6px 0 #EC6C10}
.nav a.lnk{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;font-size:15px;background:linear-gradient(#EC6C10,#EC6C10) 0 calc(100% - 9px)/0 3px no-repeat;transition:background-size .25s;padding:0}
.nav a.lnk:hover{background-size:100% 3px;color:#2A1A10}
.seg{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;box-sizing:border-box;text-decoration:none;font-family:inherit;font-weight:800;font-size:13px;padding:8px 12px;border:0;background:transparent;color:#2A1A10;cursor:pointer;transition:background .2s,color .2s}
.seg.on{background:#2A1A10;color:#FFF4E8}
.logo:hover .lf .pt{transform:rotate(90deg)}
.lf .pt{transform-origin:22px 22px;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}

/* motion */
@keyframes fu{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes dh{to{stroke-dashoffset:-48}}
@keyframes scan{from{top:-6px}to{top:482px}}
@keyframes pop{0%,6%{transform:scale(0);opacity:0}14%{transform:scale(1.25);opacity:1}20%,88%{transform:scale(1);opacity:1}96%,100%{transform:scale(0);opacity:0}}
@keyframes fl{0%,100%{background:transparent}50%{background:rgba(253,175,59,.45)}}
@keyframes ty{0%{width:0}55%,100%{width:26ch}}
@keyframes blink{50%{opacity:0}}
@keyframes ckd{0%,8%{stroke-dashoffset:34}26%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:34}}
@keyframes sbm{from{transform:translateY(0)}to{transform:translateY(150px)}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes dot{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(188px);opacity:0}}
.spin{animation:sp 48s linear infinite}
.dashed{animation:dh 3s linear infinite}
.fixes-band{background:#2A1A10;color:#FFF4E8;border-top:2px solid #2A1A10;border-bottom:2px solid #2A1A10}
.fixes{list-style:none;margin:0 auto;max-width:1280px;box-sizing:border-box;padding:22px clamp(20px,5vw,48px);display:flex;flex-wrap:wrap;gap:12px 40px;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:15px;line-height:1.4}
@media (prefers-reduced-motion: reduce){
.spin,.dashed,details p,.pn,.pinp,.hot,.ty,.ty2,.caret,.ckp,.sbar,.pls,.dotm,.rl{animation:none!important}
.demo *,.tilt,.stack *{transition:none!important}
.ty{width:26ch!important}
.ckp{stroke-dashoffset:0!important}
.pinp{opacity:1!important;transform:none!important}
}

/* hero 3D scene */
.scene{position:relative;width:100%;max-width:520px;height:540px;margin:0 auto;perspective:1500px}
.stack{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(55deg) rotateZ(-33deg)}
.layer{position:absolute;left:50%;top:50%;width:280px;height:380px;margin:-190px 0 0 -140px;border:2px solid #2A1A10;border-radius:14px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.2,.5,1)}
.la{background:#FFFDF8;box-shadow:14px 14px 0 rgba(42,26,16,.22);transform:translateZ(0)}
.lb{background:#2A1A10;color:#FFE3B8;transform:translateZ(96px);box-shadow:none;opacity:.94}
.lc{background:rgba(255,244,232,.18);transform:translateZ(192px);border-style:dashed;border-color:#EC6C10}
.fl3{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;transform:translateZ(300px)}
.blk{position:absolute;border-radius:5px}
.lab{position:absolute;left:12px;bottom:10px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;background:#FDAF3B;color:#2A1A10;padding:3px 8px;border-radius:4px}
.lc .lab{background:#EC6C10}
.cl{position:absolute;left:18px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.4;white-space:nowrap;overflow:hidden;color:#FFE3B8}
.ty{width:0;animation:ty 5s steps(26,end) infinite}
.hot{animation:fl 2.2s ease-in-out infinite;border-radius:3px}
.sbx{position:absolute;border:2px dashed #EC6C10;border-radius:4px}
.pinp{position:absolute;right:-10px;top:-13px;min-width:22px;height:22px;border-radius:11px;background:#2A1A10;color:#FFF4E8;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;animation:pop 8s ease-out infinite}

/* result demo */
.tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1);transform:perspective(1400px) rotateY(-9deg) rotateX(3deg)}
.tilt:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.scr{position:relative;width:320px;max-width:100%;height:480px;background:#FFFDF8;border:2px solid #2A1A10;border-radius:10px;overflow:hidden;box-shadow:10px 10px 0 #2A1A10;flex:none}
.strip{position:absolute;left:0;top:0;width:100%;height:64px;background:linear-gradient(120deg,#7B5CF0,#3E8BF0);display:flex;align-items:center;padding-left:20px;box-sizing:border-box;color:#fff;font-weight:800;font-size:18px}
.ttl{position:absolute;left:20px;top:82px;font-weight:800;font-size:22px;color:#D3CCC2;transition:color .7s}
.inp{position:absolute;left:20px;top:132px;width:280px;height:44px;border:1.5px solid #6B4A32;border-radius:6px;background:#fff;padding:0 12px;display:flex;align-items:center;color:#6B4A32;font-size:14px;box-sizing:border-box}
.ban{position:absolute;left:20px;top:156px;width:280px;height:36px;background:#FDAF3B;border-radius:6px;display:flex;align-items:center;padding:0 12px;font-weight:700;font-size:14px;box-sizing:border-box;transition:top .8s cubic-bezier(.3,1.5,.5,1)}
.row{position:absolute;left:20px;width:280px;display:flex;justify-content:space-between;font-size:14px;color:#6B4A32;border-bottom:1px solid #F0DFCB;padding-bottom:10px}
.pay{position:absolute;left:20px;top:410px;width:112px;height:48px;background:#2A1A10;color:#FFF4E8;border-radius:6px;display:flex;align-items:center;padding:0 14px;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;box-sizing:border-box;transition:width .8s cubic-bezier(.3,1.3,.5,1)}
.scanline{position:absolute;left:0;width:100%;height:3px;background:#EC6C10;box-shadow:0 0 14px 4px rgba(236,108,16,.5);top:-6px;opacity:0;pointer-events:none}
.bx{position:absolute;border:2px dashed #EC6C10;border-radius:4px;opacity:0;transform:scale(1.08);transition:opacity .35s,transform .35s,border-color .4s;pointer-events:none}
.bx4{border-color:#FFFDF8}
.pin{position:absolute;right:-10px;top:-13px;min-width:22px;height:22px;border-radius:11px;background:#2A1A10;color:#FFF4E8;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:background .4s}
.bx4 .pin{right:6px;top:6px;background:#FDAF3B;color:#2A1A10}
.pin .c{display:none}
.b1{left:16px;top:78px;width:200px;height:36px}
.b2{left:16px;top:126px;width:288px;height:72px}
.b3{left:16px;top:406px;width:288px;height:56px}
.b4{left:4px;top:4px;width:312px;height:56px}
.sc .scanline{opacity:1;animation:scan 1.7s linear forwards}
.d1 .b1,.d2 .b2,.d3 .b3,.d4 .b4{opacity:1;transform:none}
.fx .scanline{opacity:0;transition:opacity .3s}
.fx .ttl{color:#2A1A10}
.fx .ban{top:206px}
.fx .pay{width:280px}
.fx .b1,.fx .b2,.fx .b3{border-style:solid;border-color:#2E6B3F}
.fx .b1 .pin,.fx .b2 .pin,.fx .b3 .pin{background:#2E6B3F}
.fx .b1 .pin .n,.fx .b2 .pin .n,.fx .b3 .pin .n{display:none}
.fx .b1 .pin .c,.fx .b2 .pin .c,.fx .b3 .pin .c{display:inline}
.rs *{transition:none!important}
.con{background:#2A1A10;color:#FFE3B8;font-family:'JetBrains Mono',monospace;font-size:13px;border-radius:10px;padding:20px;box-shadow:10px 10px 0 #EC6C10;display:flex;flex-direction:column;gap:12px;flex:1 1 280px;min-width:0;min-height:320px;box-sizing:border-box}
.ln{opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .4s;line-height:1.5}
.ln b{color:#FDAF3B;font-weight:500}
.d1 .l1,.d2 .l2,.d3 .l3,.d4 .l4,.fx .l5,.ok .l6{opacity:1;transform:none}
.l4 b{color:#FFFDF8}
.l6{color:#9BD3AE}

/* bento */
.ty2{display:block;overflow:hidden;white-space:nowrap;width:0;animation:ty 5s steps(26,end) infinite}
.caret{display:inline-block;width:8px;height:15px;background:#FDAF3B;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.ckp{stroke-dasharray:34;stroke-dashoffset:34;animation:ckd 6s ease-in-out infinite}
.sbar{animation:sbm 2.6s ease-in-out infinite alternate}
.pls{animation:pulse 2s ease-in-out infinite}
.tile{border:2px solid #2A1A10;border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:transform .3s}

/* try */
.try-img .pn-html,.try-html .pn-img{display:none!important}
.pn{animation:fu .5s both}
.tab{font-family:inherit;font-weight:700;font-size:16px;padding:12px 20px;border:2px solid #2A1A10;background:#FFFDF8;color:#2A1A10;cursor:pointer;transition:background .2s,color .2s}
.tab.on{background:#2A1A10;color:#FFF4E8}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:220px;border:2.5px dashed #2A1A10;border-radius:10px;background:#FFF4E8;text-align:center;padding:24px;cursor:pointer;transition:background .2s,transform .2s;box-sizing:border-box}
.drop:hover{background:#FFE3B8}
.ta{width:100%;box-sizing:border-box;min-height:220px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.5;padding:16px;border:2.5px solid #2A1A10;border-radius:10px;background:#2A1A10;color:#FFE3B8;resize:vertical}
.ta::placeholder{color:#B79A80}
.rl{animation:fu .4s both}

/* modes */
.m-std .g-prv,.m-std .tx-prv,.m-prv .g-std,.m-prv .tx-std{display:none!important}
.dotm{animation:dot 2.4s ease-in-out infinite}
.mb{font-family:inherit;font-weight:800;font-size:16px;padding:14px 22px;border:2px solid #2A1A10;background:#FFFDF8;color:#2A1A10;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.mb.on{background:#2A1A10;color:#FFF4E8}
.hl{border-top:2px solid #2A1A10;padding:16px 0;transition:padding-left .25s,background .25s}
.hl:hover{padding-left:12px;background:#FFE3B8}
[hidden]{display:none!important}