/* HVMBAK HELISA — narzędzie telefonu na komputerze: pasek u góry, ramka telefonu na szarym tle strony, panel przy prawej krawędzi. Ostre rogi, Inter. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-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}
html,body.tf{margin:0;height:100%}
body.tf{--tf-gora:48px;--tf-panel:324px;overflow:hidden;color:#0d0d0d;font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:12px;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 90% at 50% 40%,#f7f8f9 0%,#eceef0 60%,#e2e5e8 100%)}
.tf-gora{position:fixed;left:0;right:0;top:0;height:var(--tf-gora);z-index:5;display:flex;align-items:stretch;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(13,13,13,.14)}
.tf-tytul{margin:0;display:flex;align-items:baseline;gap:8px;padding:17px 18px 0;white-space:nowrap}
.tf-tytul b{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tf-tytul span{font-size:11px;color:rgba(13,13,13,.5)}
.tf-rozmiary{display:flex;margin:9px auto 9px 12px;border:1px solid rgba(13,13,13,.2)}
.tf-gora button,.tf-gora a{font:inherit;color:inherit;background:none;border:0;border-radius:0;margin:0;cursor:pointer;text-decoration:none;font-weight:600;font-size:11px;white-space:nowrap}
.tf-rozmiary button{padding:0 12px;color:rgba(13,13,13,.62)}
.tf-rozmiary button+button{border-left:1px solid rgba(13,13,13,.2)}
.tf-rozmiary button.wl{background:#0d0d0d;color:#fff}
.tf-prawa{display:flex;margin-right:var(--tf-panel)}
.tf-prawa button,.tf-prawa a{display:flex;align-items:center;padding:0 16px;letter-spacing:.08em;text-transform:uppercase;border-left:1px solid rgba(13,13,13,.12)}
.tf-prawa button:hover,.tf-prawa a:hover{background:rgba(13,13,13,.045)}
.tf-scena{position:fixed;left:0;right:var(--tf-panel);top:var(--tf-gora);bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.tf-miejsce{flex:none}
.tf-telefon{transform-origin:0 0;background:#eceef0;outline:1.5px solid #0d0d0d;box-shadow:0 2px 4px rgba(20,28,36,.1),0 30px 70px -30px rgba(20,28,36,.5)}
.tf-telefon iframe{display:block;width:100%;height:100%;border:0}
.tf-podpis{margin:0;font-size:11px;font-variant-numeric:tabular-nums;color:rgba(13,13,13,.5)}
/* panel: ten sam co w narzędziu komputera, tutaj przypięty do prawej krawędzi na całą wysokość */
body.tf #panel,body.tf #panel.lewo{position:fixed;left:auto;right:0;top:var(--tf-gora);bottom:0;width:var(--tf-panel);max-height:none;border-width:0 0 0 1px;box-shadow:none;background:#fff}
body.tf #panel .pn-ikona{display:none}
body.tf #panel.zwiniety{width:var(--tf-panel)}
body.tf #panel.zwiniety .pn-zakladki,body.tf #panel.zwiniety .pn-cialo,body.tf #panel.zwiniety .pn-stopa{display:revert}
body.tf #panel.zwiniety .pn-zakladki{display:grid}
body.tf #panel.zwiniety .pn-cialo{display:block}
body.tf #panel.zwiniety .pn-stopa{display:flex}