/* Тема sunprint для фигуры «Как работает термоперенос на пневмопрессе» (цвета и шрифт — с sunprint.ru). */
:root{--tp-accent:#E2231A;--tp-ink:#111114;--tp-mute:#6B6B73;--tp-hair:#E4E4DF;--tp-paper:#FAFAF8;--tp-card:#FFFFFF;--tp-chip:#FCEBEA}
*{box-sizing:border-box}
html{color-scheme:light}
body.tp-body{margin:0;padding:16px;background:var(--tp-paper);color:var(--tp-ink);font:16px/1.5 "Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.tp-card.iso[data-theme="light"]{--anatomy-card:#fff;--anatomy-paper:#fff;--anatomy-page:var(--tp-paper);--accent:var(--tp-accent)}
.tp-card{max-width:880px;margin:8px auto 32px;padding:28px 28px 22px;background:var(--tp-card);border:1px solid var(--tp-hair);border-radius:20px}
.tp-head{margin:0 0 6px}
.tp-eyebrow{margin:0 0 4px;color:var(--tp-accent);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tp-title{margin:0;font:600 28px/1.2 "Unbounded","Onest",system-ui,sans-serif;letter-spacing:-.01em}
.tp-sub{margin:0 0 10px;font:600 18px/1.3 "Unbounded","Onest",system-ui,sans-serif}

/* Сцена */
.tp-stage{position:relative;margin:8px 0 0;border-radius:14px;overflow:hidden;touch-action:pan-y;--glow:.35}
.tp-fig{position:relative}
.tp-fig .iso-svg{width:100%}
.tp-stage:focus-visible,.tp-step:focus-visible,.tp-key:focus-visible{outline:2px solid var(--tp-accent);outline-offset:3px}
.tp-pins{position:absolute;inset:0;pointer-events:none}
.tp-pin{position:absolute;display:grid;place-items:center;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:1.5px solid #3a3a40;color:var(--tp-ink);font:700 12px/1 "Onest",system-ui,sans-serif;box-shadow:0 1px 2px rgba(17,17,20,.12);transition:background-color .2s,color .2s,border-color .2s}
.tp-pin.on{background:var(--tp-accent);border-color:var(--tp-accent);color:#fff}
.tp-card:not(.tp-live) .tp-pin{display:none}

/* Материалы: зелёная станина и кожухи, алюминий колонны и столов, оранжевый силикон, фанера, белая футболка. */
.m-green{--anatomy-paper:#25634b;--anatomy-top:#3a8466;--anatomy-shade-0:#163f2f;--anatomy-shade-1:#1c4c39;--anatomy-shade-2:#225a44;--anatomy-shade-3:#2a6a51;--anatomy-hi:#0a2118;--anatomy-mid:#163f2f;--anatomy-faint:#5f9c84;--anatomy-dot:#d8e8e0}
.m-alu{--anatomy-paper:#d4d7da;--anatomy-top:#f1f2f4;--anatomy-shade-0:#aeb2b7;--anatomy-shade-1:#bfc2c7;--anatomy-shade-2:#cfd2d6;--anatomy-shade-3:#e0e2e5;--anatomy-hi:#575b62;--anatomy-faint:#b3b7bc}
.m-steel{--anatomy-paper:#a9adb3;--anatomy-top:#d3d6da;--anatomy-shade-0:#83878e;--anatomy-shade-1:#93979d;--anatomy-shade-2:#a3a7ad;--anatomy-shade-3:#c9ccd1;--anatomy-hi:#3e4249;--anatomy-faint:#8d9198}
.m-heat{--anatomy-paper:#9ea3a9;--anatomy-top:#c4c8cc;--anatomy-shade-0:#7c8188;--anatomy-shade-1:#878c93;--anatomy-shade-2:#93989e;--anatomy-shade-3:#a3a8ad;--anatomy-hi:#3a3e44;--anatomy-faint:#8a8f95}
.m-chrome{--anatomy-paper:#c9cdd2;--anatomy-top:#eef0f2;--anatomy-shade-0:#9da2a8;--anatomy-shade-1:#b0b4ba;--anatomy-shade-2:#c3c7cc;--anatomy-shade-3:#e3e6e9;--anatomy-hi:#4b4f56;--anatomy-faint:#a9adb3}
.m-braid{--anatomy-paper:#b7bbc0;--anatomy-top:#dcdfe2;--anatomy-shade-0:#8e9298;--anatomy-shade-1:#9da1a7;--anatomy-shade-2:#adb1b6;--anatomy-shade-3:#d2d5d9;--anatomy-hi:#53575e;--anatomy-faint:#9ca0a6}
.m-brass{--anatomy-paper:#c8a04a;--anatomy-top:#e6c56f;--anatomy-shade-0:#9c7a2c;--anatomy-shade-1:#ad8a36;--anatomy-shade-2:#be9a41;--anatomy-shade-3:#dcbb63;--anatomy-hi:#5e4612;--anatomy-faint:#d9bd7a}
.m-black{--anatomy-paper:#2c2d32;--anatomy-top:#5a5c62;--anatomy-shade-0:#1b1c20;--anatomy-shade-1:#23242a;--anatomy-shade-2:#2c2d32;--anatomy-shade-3:#3d3e44;--anatomy-hi:#0c0c0e;--anatomy-faint:#6d6f75}
.m-red{--anatomy-paper:#d6261c;--anatomy-top:#f2493d;--anatomy-shade-0:#a3170f;--anatomy-shade-1:#b81d14;--anatomy-shade-2:#cc2319;--anatomy-shade-3:#e0332a;--anatomy-hi:#5e0b06;--anatomy-faint:#f08a83}
.m-yellow{--anatomy-paper:#f2c418;--anatomy-top:#ffdc4a;--anatomy-shade-0:#c99a00;--anatomy-shade-1:#dbab05;--anatomy-shade-2:#ebbb10;--anatomy-shade-3:#f7cd2c;--anatomy-hi:#6b5200;--anatomy-faint:#f6d873}
.m-btn{--anatomy-paper:#2fa35a;--anatomy-top:#56c47e;--anatomy-shade-0:#1d7a40;--anatomy-shade-1:#238a49;--anatomy-shade-2:#2a9a52;--anatomy-shade-3:#37ad61;--anatomy-hi:#0d3d1f;--anatomy-faint:#8ad3a5}
.m-navy{--anatomy-paper:#2b3d66;--anatomy-top:#4a5f8e;--anatomy-shade-0:#1a2645;--anatomy-shade-1:#202e52;--anatomy-shade-2:#27375f;--anatomy-shade-3:#33456f;--anatomy-hi:#0c1326;--anatomy-faint:#6d7fa6}
.m-white{--anatomy-paper:#ecebe6;--anatomy-top:#fbfbf8;--anatomy-shade-0:#c9c8c2;--anatomy-shade-1:#d6d5cf;--anatomy-shade-2:#e1e0db;--anatomy-shade-3:#efeee9;--anatomy-hi:#6d6c66;--anatomy-faint:#cfcec8}
.m-bowl{--anatomy-paper:#e6dcc0;--anatomy-top:#f4eedd;--anatomy-shade-0:#c4b894;--anatomy-shade-1:#d1c6a5;--anatomy-shade-2:#ddd3b6;--anatomy-shade-3:#ece5cf;--anatomy-hi:#77705a;--anatomy-faint:#cfc6aa}
.m-pad{--anatomy-paper:#e2683f;--anatomy-top:#f08a62;--anatomy-shade-0:#b44a27;--anatomy-shade-1:#c5552f;--anatomy-shade-2:#d35f37;--anatomy-shade-3:#e06c44;--anatomy-hi:#6a2912;--anatomy-faint:#f2a583}
.m-wood{--anatomy-paper:#d8b688;--anatomy-top:#ebd2ab;--anatomy-shade-0:#b08a5a;--anatomy-shade-1:#bf9a69;--anatomy-shade-2:#cba676;--anatomy-shade-3:#d7b385;--anatomy-hi:#6a4f2d;--anatomy-faint:#c9ab80}
.m-sheet{--anatomy-paper:#f1efe9;--anatomy-top:#fbfaf6;--anatomy-shade-0:#d3d0c7;--anatomy-shade-1:#dedbd3;--anatomy-shade-2:#e7e5de;--anatomy-shade-3:#f0eee8;--anatomy-hi:#7a776f;--anatomy-faint:#d6d3cb}
.m-shirt{--anatomy-paper:#24365e;--anatomy-top:#33497a;--anatomy-shade-0:#16223d;--anatomy-shade-1:#1b2a4a;--anatomy-shade-2:#213256;--anatomy-shade-3:#2a3d66;--anatomy-hi:#0a1022;--anatomy-faint:#4a5f8c}
.m-film{--anatomy-paper:#e9f3f8;--anatomy-top:#f3f9fc;--anatomy-shade-0:#c8dbe6;--anatomy-shade-1:#d3e3ec;--anatomy-shade-2:#dde9f0;--anatomy-shade-3:#e8f1f6;--anatomy-hi:#8aa4b3;--anatomy-faint:#c3d6e1}
.m-film .iso-shade,.m-film .iso-top{fill-opacity:.42}
.m-spring{--anatomy-hi:#2a2c31;--anatomy-lo:#8d9198;--anatomy-dot:#2a2c31}

/* Нагрев: свечение под плитой и тёплый оттенок горячей плиты (сила — --glow, при прижиме больше). */
.k-glow{fill:#ff5a1f;stroke:none;filter:blur(6px);opacity:calc(var(--glow)*.6)}
.tp-hot .iso-shade[data-shade="0"]{fill:color-mix(in srgb,#ff5a1f calc(var(--glow)*62%),var(--anatomy-shade-0))}
.tp-hot .iso-shade[data-shade="1"]{fill:color-mix(in srgb,#ff5a1f calc(var(--glow)*58%),var(--anatomy-shade-1))}
.tp-hot .iso-shade[data-shade="2"]{fill:color-mix(in srgb,#ff5a1f calc(var(--glow)*54%),var(--anatomy-shade-2))}
.tp-hot .iso-shade[data-shade="3"]{fill:color-mix(in srgb,#ff5a1f calc(var(--glow)*50%),var(--anatomy-shade-3))}
.tp-hot .iso-top{fill:color-mix(in srgb,#ff5a1f calc(var(--glow)*35%),var(--anatomy-top))}
.tp-lamp .iso-shade,.tp-lamp .iso-top{fill:#ff3d2e}
/* Лазерные указатели: линзы и крест на ткани светятся во время укладки (--l1, --l2 — по столам). */
.tp-lens1 .iso-shade,.tp-lens1 .iso-top{fill:color-mix(in srgb,#ff2a1a calc(var(--l1,0)*100%),#2c2d32)}
.tp-lens2 .iso-shade,.tp-lens2 .iso-top{fill:color-mix(in srgb,#ff2a1a calc(var(--l2,0)*100%),#2c2d32)}
.k-laser{fill:#ff3a26}
/* Голову переводят рукой: ручка краснеет, пока голова в пути (--move), рядом стрелка направления. */
.tp-grip .iso-shade[data-shade="1"]{fill:color-mix(in srgb,#E2231A calc(var(--move,0)*85%),var(--anatomy-shade-1))}
.tp-grip .iso-shade[data-shade="3"]{fill:color-mix(in srgb,#ff6a5f calc(var(--move,0)*85%),var(--anatomy-shade-3))}
.tp-grip .iso-top{fill:color-mix(in srgb,#E2231A calc(var(--move,0)*85%),var(--anatomy-top))}
.k-move{fill:#E2231A;stroke:#fff;stroke-width:.5px;stroke-linejoin:round}
/* Плёнку снимают сразу, горячей: тёплый оттенок плёнки при отрыве. */
.tp-hotfilm .iso-shade,.tp-hotfilm .iso-top{fill:#ffc7a8;fill-opacity:.55}
.k-hem{fill:#3d5590}

/* Мелкие детали: винты, болты, пульт, дисплей, кабель-канал, футболка, рисунок, плёнка. */
.k-bolt{stroke:#cfd3d7;stroke-width:1.5;stroke-linecap:round;fill:none}
.k-screw{stroke:#5f636a;stroke-width:1.05;stroke-linecap:round;fill:none}
.k-rule{fill:#7b7f86}
.k-groove{fill:#7e838a}
.k-sideface{fill:#aeb2b7;stroke:#575b62;stroke-width:.6px;stroke-linejoin:round}
.k-inset{fill:#bcc0c5;stroke:#8d9198;stroke-width:.35}
.k-vent{fill:#17191c;stroke:#0b0c0e;stroke-width:.3}
.k-ventdot{stroke:#50555b;stroke-width:.9;stroke-linecap:round;fill:none}
.k-tile{fill:#f7f7f4;stroke:#8d9097;stroke-width:.3}
.k-glyph{fill:#2c2d32}
.k-bezel{fill:#141518;stroke:#0b0c0e;stroke-width:.3}
.k-flame{fill:#e2231a}
.k-arrow{fill:#2a7d4f}
.k-dial{fill:#fbfbf8;stroke:#3a3c42;stroke-width:.3}
.k-needle{fill:#d3241b}
.k-warn{fill:#f2c418;stroke:#1b1c20;stroke-width:.35;stroke-linejoin:round}
.k-screen{fill:#0d1117}
.k-seg1{fill:#38b6ff}
.k-seg2{fill:#ff6a3d}
.k-track{fill:#2a2f36}
.k-key{fill:none;stroke:#d7dde4;stroke-width:.3}
.k-bar{fill:#f5d000}
.k-chain{fill:#2a2b30;stroke:#0c0c0e;stroke-width:.45;stroke-linejoin:round}
.k-chaintop{fill:#4a4c53;stroke:#0c0c0e;stroke-width:.4}
.k-chainrim{fill:#3c3e44;stroke:#0c0c0e;stroke-width:.3}
.k-link{fill:#5a5c63}
.k-shade{fill:#000;fill-opacity:.16}
.k-fold{fill:#000;fill-opacity:.22}
.k-neck-in{fill:#111a30}
.k-neck{fill:#3a5184;stroke:#0d1428;stroke-width:.3}
.k-ink{fill:#d3241b}
.k-ink2{fill:#f3f2ec}
.k-gloss{fill:#fff;fill-opacity:.5}

/* Подсветка детали из легенды: остальное бледнеет, выбранное — в цвете. */
.tp-stage .it{transition:opacity .2s}
.tp-stage[data-focus] .it:not(.on){opacity:.22 !important}
.tp-stage[data-focus] .it.on .iso-edge{stroke:var(--tp-accent)}
.tp-stage[data-focus] .it:not(.on) .k-glow{opacity:0}

/* Что сейчас происходит */
.tp-now{display:flex;flex-direction:column;gap:2px;min-height:76px;margin:14px 0 0;padding:12px 16px;border-left:3px solid var(--tp-accent);background:var(--tp-chip);border-radius:0 12px 12px 0}
.tp-now-step{color:var(--tp-mute);font-size:13px;font-weight:600;letter-spacing:.02em}
.tp-now-text{font-size:18px;font-weight:500;line-height:1.35}

/* Кнопки этапов: на телефоне — основной способ управления. */
.tp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.tp-step{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:6px 10px;border:1.5px solid #d6d6d1;border-radius:12px;background:#fff;color:var(--tp-ink);font:600 15px/1.2 "Onest",system-ui,sans-serif;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.tp-step:hover{border-color:var(--tp-accent)}
.tp-step[aria-pressed="true"]{background:var(--tp-accent);border-color:var(--tp-accent);color:#fff}
.tp-step-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;line-height:1}
.tp-hint{margin:10px 0 0;color:var(--tp-mute);font-size:14px}

/* Легенда и польза */
.tp-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--tp-hair)}
.tp-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 14px;margin:0;padding:0;list-style:none}
.tp-key{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:none;color:inherit;font:inherit;font-size:15px;line-height:1.4;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s}
.tp-key:hover,.tp-key.on{background:var(--tp-chip);border-color:#f2c6c3}
.tp-key[aria-pressed="true"]{border-color:var(--tp-accent)}
.tp-num{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;border:1.5px solid #3a3a40;font-size:12px;font-weight:700;line-height:1}
.tp-key.on .tp-num,.tp-key[aria-pressed="true"] .tp-num{background:var(--tp-accent);border-color:var(--tp-accent);color:#fff}
.tp-benefits{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tp-benefits li{position:relative;padding-left:22px;font-size:15px;line-height:1.5}
.tp-benefits li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--tp-accent)}
.tp-note{margin:18px 0 0;color:var(--tp-mute);font-size:13px}

@media (max-width:640px){
  .tp-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  body.tp-body{padding:0}
  .tp-card{margin:0;padding:18px 16px 16px;border-radius:0;border-width:0 0 1px}
  .tp-title{font-size:22px}
  .tp-stage{margin:4px -16px 0;border-radius:0}
  .tp-fig{width:106%;margin-left:-3%}
  .tp-pin{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:11px}
  .tp-now-text{font-size:16px}
  .tp-step{font-size:15px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .tp-stage .it,.tp-pin,.tp-step,.tp-key{transition:none}
}