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

/* Сцена */
.tz-stage{position:relative;margin:8px 0 0;border-radius:14px;overflow:hidden;touch-action:pan-y;--heat:1}
.tz-fig{position:relative}
.tz-fig .iso-svg{width:100%}
.tz-stage:focus-visible,.tz-step:focus-visible,.tz-key:focus-visible{outline:2px solid var(--tz-accent);outline-offset:3px}
.tz-pins{position:absolute;inset:0;pointer-events:none}
.tz-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(--tz-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}
.tz-pin.on{background:var(--tz-accent);border-color:var(--tz-accent);color:#fff}
.tz-card:not(.tz-live) .tz-pin{display:none}
.tz-pin.tz-pin-off{opacity:0}
.tz-paper{--anatomy-top:#fffaf0;--anatomy-shade-0:#e9dfc8;--anatomy-shade-1:#efe6d2;--anatomy-shade-2:#f4ecdb;--anatomy-shade-3:#f8f2e4}

/* Нагрев — только CSS: свечение под плитой, тёплый оттенок граней, лампа на пульте. */
.tz-glow{fill:var(--tz-accent);stroke:none;filter:blur(7px);opacity:calc(var(--heat)*.5);transform:translateY(4px)}
.tz-stage[data-stage="0"] .tz-glow{animation:tz-breathe 2.2s ease-in-out infinite}
@keyframes tz-breathe{0%,100%{opacity:calc(var(--heat)*.4)}50%{opacity:calc(var(--heat)*.72)}}
.tz-hot .iso-shade[data-shade="0"]{fill:color-mix(in srgb,var(--tz-accent) calc(var(--heat)*30%),var(--anatomy-shade-0))}
.tz-hot .iso-shade[data-shade="1"]{fill:color-mix(in srgb,var(--tz-accent) calc(var(--heat)*26%),var(--anatomy-shade-1))}
.tz-hot .iso-shade[data-shade="2"]{fill:color-mix(in srgb,var(--tz-accent) calc(var(--heat)*22%),var(--anatomy-shade-2))}
.tz-hot .iso-shade[data-shade="3"]{fill:color-mix(in srgb,var(--tz-accent) calc(var(--heat)*18%),var(--anatomy-shade-3))}
.tz-hot .iso-top{fill:color-mix(in srgb,var(--tz-accent) calc(var(--heat)*10%),var(--anatomy-top))}
.tz-heater circle{fill:var(--tz-accent);opacity:calc(.15 + var(--heat)*.8)}
.tz-lamp .iso-fill,.tz-lamp .iso-shade,.tz-lamp .iso-top{fill:color-mix(in srgb,var(--tz-accent) calc(var(--heat)*85%),#e6e6e3)}

/* Фольга: золото на ленте, рулоне и оттиске; окно — прозрачная плёнка, где слой ушёл на бумагу. */
.tz-foil,.tz-gold{fill:url(#tzGold);stroke:#8d6516;stroke-width:.45;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tz-foil-under{fill:#b48a2c}
.tz-foil-edge{fill:#8d6516;stroke:#7a5612;stroke-width:.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tz-film{fill:#f7f4ec;stroke:#c3ae7c;stroke-width:.45;vector-effect:non-scaling-stroke}
.tz-goldroll{--anatomy-top:#f2d98f;--anatomy-shade-0:#a97c20;--anatomy-shade-1:#c19435;--anatomy-shade-2:#d6ad4b;--anatomy-shade-3:#e7c568;--anatomy-hi:#7a5612;--anatomy-mid:#8d6516;--anatomy-faint:#caa24a}
.tz-filmroll{--anatomy-top:#f3efe4;--anatomy-shade-0:#c8b994;--anatomy-shade-1:#d5c9a8;--anatomy-shade-2:#e1d8bd;--anatomy-shade-3:#ebe4cf;--anatomy-hi:#8c7d58;--anatomy-mid:#a3946b;--anatomy-faint:#d1c39d}

/* Подсветка детали из легенды: остальное бледнеет, выбранное — в цвет акцента. */
.tz-stage .it{transition:opacity .2s}
.tz-stage[data-focus] .it:not(.on){--anatomy-hi:#c6c6ca;--anatomy-mid:#d4d4d7;--anatomy-lo:#e0e0e2;--anatomy-faint:#ebebed;--anatomy-lit:#c6c6ca;--anatomy-dot:#c6c6ca;--anatomy-shade-0:#efefed;--anatomy-shade-1:#f2f2f0;--anatomy-shade-2:#f5f5f3;--anatomy-shade-3:#f8f8f6;--anatomy-halo-opacity:.12}
.tz-stage[data-focus] .it:not(.on) .tz-goldroll,.tz-stage[data-focus] .it:not(.on) .tz-filmroll{filter:grayscale(.85) contrast(.35) brightness(1.45)}
.tz-stage[data-focus] .it:not(.on) [data-rib],.tz-stage[data-focus] .it:not(.on) .tz-glow,.tz-stage[data-focus] .it:not(.on) .tz-lamp,.tz-stage[data-focus]:not([data-focus="print"]) .tz-print path{opacity:.28}
.tz-stage[data-focus] .on{--anatomy-hi:var(--tz-accent);--anatomy-mid:#e2554e;--anatomy-lo:#ec8f8a;--anatomy-lit:var(--tz-accent);--anatomy-dot:var(--tz-accent)}
.tz-stage[data-focus] .on .tz-foil,.tz-stage[data-focus] .on .tz-gold{stroke:var(--tz-accent);stroke-width:1.2}
.tz-stage[data-focus="print"] .tz-print{opacity:1}

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

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

/* Легенда и польза */
.tz-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--tz-hair)}
.tz-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 14px;margin:0;padding:0;list-style:none}
.tz-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}
.tz-key:hover,.tz-key.on{background:var(--tz-chip);border-color:#f2c6c3}
.tz-key[aria-pressed="true"]{border-color:var(--tz-accent)}
.tz-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}
.tz-key.on .tz-num,.tz-key[aria-pressed="true"] .tz-num{background:var(--tz-accent);border-color:var(--tz-accent);color:#fff}
.tz-benefits{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tz-benefits li{position:relative;padding-left:22px;font-size:15px;line-height:1.5}
.tz-benefits li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--tz-accent)}
.tz-note{margin:18px 0 0;color:var(--tz-mute);font-size:13px}

@media (max-width:560px){
  body.tz-body{padding:0}
  .tz-card{margin:0;padding:18px 16px 16px;border-radius:0;border-width:0 0 1px}
  .tz-title{font-size:22px}
  .tz-stage{margin:4px -16px 0;border-radius:0}
  .tz-fig{width:108%;margin-left:-4%}
  .tz-pin{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:11px}
  .tz-now-text{font-size:16px}
  .tz-step{font-size:15px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .tz-stage[data-stage="0"] .tz-glow{animation:none}
  .tz-stage .it,.tz-pin,.tz-step,.tz-key{transition:none}
}