/* GERADO por _gera_painel.py a partir da /lp (site-new/index.html). Não editar aqui. */
.wtp .device{position:relative;width:min(80%,380px);background:linear-gradient(165deg,#2a2c2f,#0d0e0f 42%,#060606);border-radius:30px;padding:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 3px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05)}
.wtp .plate{background:linear-gradient(172deg,#4b4f54,#3b3e42 55%,#34373a);border-radius:20px;padding:12px 16px 16px;
  box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.35)}
.wtp .dev-top{display:flex;justify-content:space-between;align-items:center;padding:0 4px 9px;font:600 .74rem/1 "Barlow Semi Condensed",var(--body);letter-spacing:0;color:#fff}
.wtp .dev-top .wifi{display:flex;align-items:center;gap:7px}
.wtp .dev-top .wifi svg{width:20px;height:14px}
.wtp .dev-top .brand{font:800 1.32rem/.82 "Barlow Semi Condensed",var(--body);letter-spacing:-.05em;color:#fff;text-align:center}
.wtp .dev-top .brand small{display:block;font:700 .5rem/1.25 "Barlow Semi Condensed",var(--body);letter-spacing:.01em}
.wtp .lcd{position:relative;aspect-ratio:7/5;border-radius:3px;overflow:hidden;background:linear-gradient(175deg,#2449e8,#1c3acf);container-type:inline-size;
  box-shadow:0 0 0 2px #17191c,0 1px 0 2px rgba(255,255,255,.08),inset 0 0 16px rgba(0,0,50,.3);
  font-family:"DotGothic16",var(--mono);color:#f3f6ff;-webkit-text-stroke:.025em currentColor;letter-spacing:.07em;transition:filter .3s,background .3s}
.wtp .lcd.dim{filter:brightness(.6) saturate(.85)}
.wtp .lcd.off{background:#14181c;filter:none}
.wtp .lcd.off .scr{visibility:hidden}
.wtp .scr{position:absolute;inset:0;padding:4.5% 5% 4%}
.wtp .scr svg{display:inline-block;vertical-align:-.08em;width:.62em;height:.62em}
.wtp .one{display:grid;grid-template-columns:23% 1fr;column-gap:4%;height:100%}
.wtp .gauge{display:flex;flex-direction:column;align-items:center;gap:2.6cqw;min-height:0}
.wtp .gauge .pc{font-size:6.2cqw;line-height:.9;letter-spacing:.08em;margin-right:-.08em}
.wtp .tube{position:relative;flex:1;width:88%;border:.6cqw solid currentColor;overflow:hidden;
  background:repeating-linear-gradient(to top,transparent 0 calc(11.1% - .6cqw),currentColor calc(11.1% - .6cqw) 11.1%) center/40% 100% no-repeat}
.wtp .tube i{position:absolute;inset:0;background:#f3f6ff repeating-linear-gradient(to top,transparent 0 calc(11.1% - .6cqw),#1f40dc calc(11.1% - .6cqw) 11.1%) center/40% 100% no-repeat;transition:clip-path .6s}
.wtp .info{display:flex;flex-direction:column;min-width:0}
.wtp .info .row{display:flex;justify-content:space-between;align-items:center;font-size:6.4cqw;line-height:.9}
.wtp .info .row .nm{margin-left:4%}
.wtp .tk{display:flex;align-items:center;gap:1.4cqw}
.wtp .tk b{font-weight:400;background:#f3f6ff;color:#1f40dc;padding:.4cqw 1.3cqw .2cqw;line-height:.9;letter-spacing:0}
.wtp .tk svg{width:.7em!important;height:.8em!important}
.wtp .big{margin-top:4cqw;border:.6cqw solid currentColor;text-align:center;font-size:12.4cqw;line-height:1.7;letter-spacing:.06em;white-space:nowrap;-webkit-text-stroke:.035em currentColor}
.wtp .hint{margin-top:auto;padding-left:0;display:grid;gap:2cqw;font-size:5.8cqw;line-height:.9}
.wtp .hint span{display:flex;align-items:center;gap:3.2cqw}
.wtp .hint i{font-style:normal;display:inline-flex;gap:2.4cqw;min-width:13cqw}
.wtp .alert{margin-top:auto;text-align:center;font-size:5.8cqw;line-height:.95;animation:blink 1s steps(1) infinite}
.wtp .note{margin-top:auto;text-align:center;font-size:5.4cqw;line-height:.95}
@keyframes blink{50%{opacity:.15}}
.wtp .four{display:grid;grid-template-columns:repeat(4,1fr);column-gap:5%;height:100%}
.wtp .col{display:grid;grid-template-rows:auto 1fr;gap:2.4cqw;min-width:0;min-height:0}
.wtp .col .pc{font-size:5.4cqw;line-height:.9;text-align:center;letter-spacing:.06em}
.wtp .col .bd{display:flex;gap:1.4cqw;min-height:0}
.wtp .col .vn{display:flex;flex-direction:column;align-items:center;width:3.8cqw;font-size:5cqw;line-height:1;letter-spacing:0;overflow:hidden}
.wtp .col .tube{width:auto}
.wtp .menu{height:100%;display:flex;flex-direction:column;justify-content:center;gap:.6cqw;padding:0 7%;font-size:5.6cqw;line-height:1.05}
.wtp .menu .mt{border:.6cqw solid currentColor;text-align:center;margin-bottom:1.6cqw;padding-top:.6cqw}
.wtp .menu span{display:flex;justify-content:space-between;align-items:center}
.wtp .menu .mt{justify-content:center}
.wtp .menu i{font-style:normal}
.wtp .dlg{height:100%;border:.6cqw solid currentColor;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:2.6cqw 5cqw;font-size:5.4cqw;line-height:.95;text-align:center}
.wtp .dlg .v{font-size:11cqw;line-height:1}
.wtp .dlg .s{display:flex;justify-content:center;align-items:center;gap:2.4cqw}
.wtp .keys{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;padding:0 2px;position:relative;z-index:0}
.wtp .keys .lbl{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font:600 .55rem/1 "Barlow Semi Condensed",var(--body);letter-spacing:0;color:#fff;white-space:nowrap}
.wtp .key{position:relative;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 45% 35%,#4a4d52,#2b2d31 70%);box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 1px rgba(0,0,0,.4);display:grid;place-items:center;color:#fff;transition:transform .1s}
.wtp .key svg{width:15px;height:15px}
.wtp .key[data-k="esc"] svg{width:21px;height:21px}
.wtp .key{transition:transform .1s,box-shadow .2s}
.wtp .key::before{content:"";position:absolute;inset:-12px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(80,130,255,.95) 30%,rgba(60,110,255,.45) 50%,transparent 72%);opacity:0;transition:opacity .2s;pointer-events:none}
@media (hover:hover){.wtp .key:hover::before{opacity:1}.wtp .key:hover{box-shadow:0 0 0 1px rgba(120,160,255,.55),0 1px 2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}}
.wtp .key:focus-visible::before{opacity:1}
.wtp .key:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.wtp .key:focus-visible{outline:2px solid var(--teal2);outline-offset:3px}
.wtp{position:relative;display:flex;flex-direction:column;align-items:center}
.wtp .device{width:min(100%,400px)}
.wtp .try{display:flex;align-items:center;gap:8px;margin-top:18px;font:500 .8rem/1 var(--mono);letter-spacing:.06em;color:var(--teal3)}
.wtp .try svg{width:16px;height:16px}
/* seção da home e chamada no hero */
#painel{scroll-margin-top:var(--hh)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"h d" "b d";column-gap:64px;align-items:center}
.pgrid .ph{grid-area:h;align-self:end}
.pgrid .pb{grid-area:b;align-self:start}
.pgrid .wtp{grid-area:d}
@media (max-width:980px){.pgrid{grid-template-columns:1fr;grid-template-areas:"h" "d" "b";row-gap:34px}.pk-list{margin-top:0}}
.pk-list{list-style:none;display:grid;gap:14px;margin-top:26px}
.pk-list li{display:flex;align-items:center;gap:14px;color:var(--dtext)}
.pk-list .pk{display:flex;gap:6px;flex:none;min-width:70px}
.pk-list .pk span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 45% 35%,#4a4d52,#2b2d31 70%);box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.pk-list .pk svg{width:13px;height:13px}
.pk-list .pk .esc{font:700 .62rem/1 "Barlow Semi Condensed",var(--body)}
.hlive{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:600 1rem/1.2 var(--disp);color:var(--teal);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.hlive:hover{color:var(--ink)}
.hlive .dot{position:relative;width:10px;height:10px;border-radius:50%;background:#e5484d;flex:none}
.hlive .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #e5484d;animation:hlive 1.6s ease-out infinite}
@keyframes hlive{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.3);opacity:0}}
.hlive svg{width:16px;height:16px}
@media (max-width:640px){
  .wtp .key{width:30px;height:30px}
  .wtp .device{width:min(100%,360px);padding:9px;border-radius:24px}
  .wtp .plate{padding:10px 11px 13px;border-radius:16px}
  .wtp .dev-top{font-size:.62rem}
}
@media (max-width:380px){
  .wtp .key{width:26px;height:26px}
  .wtp .key svg{width:12px;height:12px}
  .wtp .key[data-k="esc"] svg{width:18px;height:18px}
  .wtp .dev-top{font-size:.55rem}
  .wtp .dev-top .wifi{gap:5px}
  .wtp .dev-top .wifi svg{width:16px;height:11px}
  .wtp .dev-top .brand{font-size:.95rem}
}
