/* DERZAIN · живые виджеты: tg-чат, терминал, калькулятор */
:root{--or:#FF6B1A;--or-h:#E85A0D;--ink:#181210;--cream:#FFF6EE;--honey:#FFD23F;--ink60:#6E625A;--cream60:#C9BEB5;--line-d:#3A2F28;--fd:'Unbounded',sans-serif;--ft:'Onest',sans-serif;--ease:cubic-bezier(.2,.8,.2,1);--sh-pop:0 18px 44px rgba(24,18,16,.3)}
/* телеграм-мокап с цикличной анимацией */
.tgm{width:min(340px,88vw);background:var(--ink);border-radius:22px;padding:14px;box-shadow:var(--sh-pop);transform:rotate(1.6deg)}
.tgm-head{display:flex;gap:10px;align-items:center;padding:4px 6px 12px;border-bottom:1px solid var(--line-d);margin-bottom:12px}
.tgm-ava{width:34px;height:34px;border-radius:9px;background:var(--or);color:var(--ink);font-family:var(--fd);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px;transform:rotate(-3deg)}
.tgm-head b{color:var(--cream);font-size:14px;display:block}
.tgm-head i{color:var(--or);font-size:11px;font-style:normal}
.tgm-b{max-width:82%;border-radius:14px;padding:9px 13px;font-size:13.5px;margin:8px 0;opacity:0;animation:tgmCyc 10s infinite}
.tgm-user{background:var(--or);color:var(--ink);margin-left:auto;border-bottom-right-radius:4px;font-weight:600}
.tgm-bot{background:#fff;color:var(--ink);border-bottom-left-radius:4px}
.tgm-typing{background:#fff;width:58px;display:flex;gap:5px;justify-content:center;padding:12px}
.tgm-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink60);animation:tgmDot 1s infinite}
.tgm-typing span:nth-child(2){animation-delay:.2s}
.tgm-typing span:nth-child(3){animation-delay:.4s}
.tgm-meta{background:none;color:var(--honey);font-size:11.5px;text-align:center;max-width:100%;margin:0;padding:2px;font-weight:600}
.tgm-pdf{display:flex;gap:10px;align-items:center;font-size:20px}
.tgm-pdf b{display:block;font-size:13px}
.tgm-pdf i{display:block;font-style:normal;font-size:11px;color:var(--ink60)}
@keyframes tgmDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* цикл: каждое сообщение появляется в своё окно, всё гаснет в конце */
.tgm-s1{animation-name:tgmS1}.tgm-s2{animation-name:tgmS2}.tgm-s3{animation-name:tgmS3}.tgm-s4{animation-name:tgmS4}.tgm-s5{animation-name:tgmS5}
@keyframes tgmS1{0%,5%{opacity:0;transform:translateY(10px)}9%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tgmS2{0%,13%{opacity:0}16%,28%{opacity:1}31%,100%{opacity:0}}
@keyframes tgmS3{0%,30%{opacity:0;transform:translateY(10px)}34%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tgmS4{0%,40%{opacity:0}44%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tgmS5{0%,52%{opacity:0;transform:translateY(10px)}56%,90%{opacity:1;transform:none}96%,100%{opacity:0}}

/* терминал-конвейер */
.term{width:min(420px,90vw);background:var(--ink);border-radius:16px;box-shadow:var(--sh-pop);overflow:hidden;transform:rotate(1.2deg)}
.term-head{display:flex;gap:7px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-d)}
.term-head span{width:11px;height:11px;border-radius:50%}
.term-head span:nth-child(1){background:var(--or)}
.term-head span:nth-child(2){background:var(--honey)}
.term-head span:nth-child(3){background:var(--cream60)}
.term-head b{margin-left:8px;color:var(--cream60);font-size:12px;font-weight:600;font-family:var(--ft)}
.term-body{padding:14px 16px;min-height:196px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--cream60);line-height:1.9}
.term-body div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:termIn .3s var(--ease)}
.term-body div::first-letter{color:var(--or)}
@keyframes termIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.term-count{padding:12px 16px;border-top:1px solid var(--line-d);color:var(--cream);font-size:13px}
.term-count b{font-family:var(--fd);color:var(--or);font-size:16px}

/* калькулятор потерь */
.calc-sec{background:#fff}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:34px;background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:34px;max-width:860px;margin-top:10px}
@media(max-width:760px){.calc{grid-template-columns:1fr;padding:24px}}
.calc-in label{display:block;font-weight:600;font-size:15px;margin:14px 0 8px}
.calc-in label b{color:var(--or-h)}
.calc-in input[type=range]{width:100%;accent-color:var(--or);height:28px}
.calc-out{display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center;background:var(--ink);border-radius:12px;padding:26px;color:var(--cream60)}
.calc-out span{font-size:13px}
.calc-out b{font-family:var(--fd);font-weight:900;font-size:clamp(26px,3.4vw,38px);color:var(--or);line-height:1.1}
.calc-out i{font-style:normal;font-size:13px;color:var(--honey)}


/* варианты для статей: по центру, без наклона, с отступами */
.tgm-art{margin:26px auto;transform:rotate(-1deg)}
.term-art{margin:26px auto;transform:none;width:min(460px,100%)}
.calc-art{margin:26px 0;grid-template-columns:1fr 1fr;max-width:720px}
@media(max-width:700px){.calc-art{grid-template-columns:1fr}}