.tr-root{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;transition:opacity .3s var(--ease,cubic-bezier(.16,1,.3,1))}
.tr-root.is-in{opacity:1}
.tr-root.is-out{opacity:0}
.tr-root .tr-veil{position:absolute;inset:0;pointer-events:auto;background:transparent}
.tr-root.no-target .tr-veil{background:rgba(2,3,4,.74)}

.tr-root .tr-spot{position:absolute;left:0;top:0;width:0;height:0;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(2,3,4,.74),0 0 0 1.5px rgba(80,254,182,.9),0 0 30px 4px rgba(80,254,182,.32);
  transition:transform .45s var(--ease,cubic-bezier(.16,1,.3,1)),width .45s var(--ease,cubic-bezier(.16,1,.3,1)),height .45s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .25s}
.tr-root .tr-spot.is-off{opacity:0}
.tr-root.no-target .tr-spot{opacity:0}
.tr-root .tr-spot-ring{position:absolute;inset:-7px;border-radius:24px;box-shadow:0 0 0 1px rgba(143,255,143,.55);opacity:0;
  animation:tr-breathe 1.6s .35s ease-out 2}
@keyframes tr-breathe{0%{opacity:.9;transform:scale(.985)}100%{opacity:0;transform:scale(1.04)}}


.tr-root .tr-card{position:absolute;left:0;top:0;z-index:3;width:min(392px,calc(100vw - 32px));margin:0;padding:20px 22px 18px;pointer-events:auto;
  border-radius:22px;color:var(--tx,#fff);
  background:radial-gradient(80% 70% at 50% 120%,rgba(80,254,182,.16),rgba(80,254,182,0) 70%),linear-gradient(170deg,rgba(16,24,27,.98),rgba(7,10,12,.985));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(80,254,182,.28),0 30px 70px -24px #000,0 30px 90px -40px rgba(80,254,182,.55);
  transition:transform .45s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .3s}
.tr-root .tr-card:focus{outline:none}
.tr-k{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;font:500 11px/1.3 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.tr-k .tr-n{color:var(--tx2);letter-spacing:.08em;font-size:11.5px}
.tr-hd{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.tr-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(80,254,182,.09);
  box-shadow:inset 0 0 0 1px rgba(80,254,182,.34),0 10px 30px -14px rgba(80,254,182,.7)}
.tr-ic .pa-ic{width:22px;height:22px;fill:none;stroke:var(--mint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tr-t{margin:0;font:400 clamp(17px,1.5vw,20px)/1.2 var(--fd);letter-spacing:.04em;text-transform:uppercase;color:#fff;outline:none;overflow-wrap:anywhere}
html[data-script="jpan"] .tr-t,html[data-script="cyrl"] .tr-t,html[data-script="viet"] .tr-t{font-family:var(--fb);font-weight:800;letter-spacing:0;text-transform:none}
.tr-p{margin:0;color:var(--tx2);font-size:14.5px;line-height:1.6}

.tr-prog{display:flex;align-items:flex-end;gap:5px;height:22px;margin:16px 0 14px;padding:0;list-style:none}
.tr-prog li{position:relative;width:7px;height:100%;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.tr-prog li i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(0deg,#3FD1A9,#50FEB6 55%,#8FFF8F);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1))}
.tr-prog li:nth-child(2){height:72%}.tr-prog li:nth-child(3){height:86%}.tr-prog li:nth-child(4){height:64%}.tr-prog li:nth-child(5){height:94%}
.tr-prog li.is-on i{transform:scaleY(1)}
.tr-prog li.is-cur{box-shadow:0 0 12px rgba(80,254,182,.55)}
.tr-acts{display:flex;align-items:center;gap:8px}
.tr-sp{flex:1}
.tr-skip{min-height:44px;margin:0 0 0 -8px;padding:0 8px;border:0;background:none;color:var(--tx3,#8A969C);font:500 12.5px/1.2 var(--fb);cursor:pointer;border-radius:10px}
.tr-skip:hover{color:#fff}
.tr-skip:focus-visible,.tr-acts .btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.tr-acts .btn-s{--h:42px;padding:0 16px;gap:8px}
.tr-acts .btn .ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tr-acts .tr-back[hidden]{display:none}

html.tr-on{scroll-behavior:auto}


@media (max-width:760px){
  .tr-root .tr-card{left:10px;right:10px;top:auto;bottom:max(10px,env(safe-area-inset-bottom,0px));width:auto;padding:16px 16px 12px;border-radius:20px;transform:none}
  .tr-root .tr-card.is-top{top:calc(70px + env(safe-area-inset-top,0px));bottom:auto}
  .tr-k{margin-bottom:10px}
  .tr-ic{width:38px;height:38px;border-radius:12px}
  .tr-ic .pa-ic{width:19px;height:19px}
  .tr-p{font-size:14px;line-height:1.55}
  .tr-prog{margin:12px 0 8px;height:18px}
  .tr-acts .btn-s{--h:44px;padding:0 14px}
  .tr-spot{border-radius:14px}
}
@media (max-width:360px){.tr-acts .tr-back span{display:none}.tr-acts .tr-back{padding:0 12px}}


.tr-root.tr-still,.tr-root.tr-still .tr-spot,.tr-root.tr-still .tr-card,.tr-root.tr-still .tr-prog li i{transition:none}
.tr-root.tr-still .tr-spot-ring{animation:none}
@media (prefers-reduced-motion:reduce){.tr-root .tr-spot-ring{animation:none}}
@media (forced-colors:active){.tr-root .tr-spot{outline:2px solid Highlight}.tr-root .tr-card{border:2px solid CanvasText}}
@media print{.tr-root{display:none!important}}
.tr-acts .tr-back:hover .ico{transform:translateX(-4px)}