/* tangothread widgets — GENERATED by tools/build_css.py from tools/widgets.src.css. Edit the .src.css, then run: python3 tools/build.py */
/* ==========================================================================
   Pixel unit: 1u = var(--tt-px) = 2px. Frames/lines are 1u thick; small labels use
   Press Start 2P at 8px (1px pixel) or 16px (2px pixel) so glyph pixels stay crisp.
   Recolor anything with `color:` (icons, stars, dividers use currentColor via mask).
   ========================================================================== */
:root {
  --tt-px: 2px;
  --tt-bg: var(--bg, #070707);
  --tt-ink: var(--ink, #F6F0F2);
  --tt-pink: var(--pink, #FF3D8A);
  --tt-red: var(--red, #FF1A3C);
  --tt-muted: #8A7A82;
  --tt-panel: #1A1216;
  --tt-panel-2: #2A1E24;
  --tt-plate: #12060a;
  --tt-pixel: "Press Start 2P", monospace;
  --tt-serif: "PT Serif", Georgia, serif;
}
.tt-px-1 { --tt-px: 1px; }
.tt-px-3 { --tt-px: 3px; }

/* ---------------------------------------------------------------- icons (16x16) */
.tt-i {
  --tt-icon: calc(var(--tt-px) * 16);
  display: inline-block; vertical-align: middle; flex: none;
  width: var(--tt-icon); height: var(--tt-icon);
  background: currentColor; color: var(--tt-pink);
  -webkit-mask: var(--tt-mask) center / 100% 100% no-repeat;
  mask: var(--tt-mask) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.tt-i--red { color: var(--tt-red); }
.tt-i--muted { color: var(--tt-muted); }
.tt-i--s { --tt-icon: 16px; }
.tt-i--l { --tt-icon: 48px; }
.tt-i--xl { --tt-icon: 64px; }
.tt-i--heart   { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EHeart%3C/title%3E%3Crect x='2' y='1' width='4' height='1'/%3E%3Crect x='10' y='1' width='4' height='1'/%3E%3Crect x='1' y='2' width='6' height='1'/%3E%3Crect x='9' y='2' width='6' height='1'/%3E%3Crect x='0' y='3' width='3' height='2'/%3E%3Crect x='5' y='3' width='11' height='1'/%3E%3Crect x='4' y='4' width='12' height='1'/%3E%3Crect x='0' y='5' width='16' height='1'/%3E%3Crect x='1' y='6' width='14' height='2'/%3E%3Crect x='2' y='8' width='12' height='1'/%3E%3Crect x='3' y='9' width='10' height='1'/%3E%3Crect x='4' y='10' width='8' height='1'/%3E%3Crect x='5' y='11' width='6' height='1'/%3E%3Crect x='6' y='12' width='4' height='1'/%3E%3Crect x='7' y='13' width='2' height='1'/%3E%3C/svg%3E"); }
.tt-i--sparkle { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ESparkle%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='13' y='12' width='1' height='1'/%3E%3Crect x='12' y='13' width='3' height='1'/%3E%3Crect x='13' y='14' width='1' height='1'/%3E%3C/g%3E%3Crect x='12' y='1' width='2' height='2'/%3E%3Crect x='5' y='3' width='2' height='3'/%3E%3Crect x='10' y='3' width='6' height='2'/%3E%3Crect x='12' y='5' width='2' height='2'/%3E%3Crect x='4' y='6' width='4' height='1'/%3E%3Crect x='3' y='7' width='6' height='1'/%3E%3Crect x='2' y='8' width='8' height='1'/%3E%3Crect x='0' y='9' width='13' height='2'/%3E%3Crect x='2' y='11' width='8' height='1'/%3E%3Crect x='3' y='12' width='6' height='1'/%3E%3Crect x='4' y='13' width='4' height='1'/%3E%3Crect x='5' y='14' width='2' height='2'/%3E%3C/svg%3E"); }
.tt-i--arrow   { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EArrow%3C/title%3E%3Crect x='8' y='2' width='1' height='1'/%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='8' y='4' width='3' height='1'/%3E%3Crect x='8' y='5' width='4' height='1'/%3E%3Crect x='0' y='6' width='14' height='1'/%3E%3Crect x='0' y='7' width='15' height='2'/%3E%3Crect x='0' y='9' width='14' height='1'/%3E%3Crect x='8' y='10' width='4' height='1'/%3E%3Crect x='8' y='11' width='3' height='1'/%3E%3Crect x='8' y='12' width='2' height='1'/%3E%3Crect x='8' y='13' width='1' height='1'/%3E%3C/svg%3E"); }
.tt-i--crown   { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ECrown%3C/title%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='7' y='2' width='2' height='2'/%3E%3Crect x='14' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='2' height='1'/%3E%3Crect x='13' y='3' width='2' height='1'/%3E%3Crect x='1' y='4' width='3' height='1'/%3E%3Crect x='6' y='4' width='4' height='2'/%3E%3Crect x='12' y='4' width='3' height='1'/%3E%3Crect x='1' y='5' width='4' height='1'/%3E%3Crect x='11' y='5' width='4' height='1'/%3E%3Crect x='1' y='6' width='14' height='2'/%3E%3Crect x='1' y='8' width='6' height='2'/%3E%3Crect x='9' y='8' width='6' height='2'/%3E%3Crect x='1' y='10' width='14' height='1'/%3E%3Crect x='1' y='12' width='14' height='2'/%3E%3C/svg%3E"); }
.tt-i--lips    { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ELips%3C/title%3E%3Crect x='3' y='3' width='3' height='1'/%3E%3Crect x='10' y='3' width='3' height='1'/%3E%3Crect x='2' y='4' width='5' height='1'/%3E%3Crect x='9' y='4' width='5' height='1'/%3E%3Crect x='1' y='5' width='14' height='1'/%3E%3Crect x='0' y='6' width='16' height='1'/%3E%3Crect x='0' y='7' width='2' height='1'/%3E%3Crect x='14' y='7' width='2' height='1'/%3E%3Crect x='1' y='8' width='14' height='1'/%3E%3Crect x='2' y='9' width='12' height='1'/%3E%3Crect x='3' y='10' width='10' height='1'/%3E%3Crect x='4' y='11' width='8' height='1'/%3E%3Crect x='5' y='12' width='6' height='1'/%3E%3C/svg%3E"); }
.tt-i--flame   { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EFlame%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='9' y='9' width='2' height='1'/%3E%3Crect x='8' y='10' width='4' height='1'/%3E%3Crect x='7' y='11' width='6' height='2'/%3E%3Crect x='8' y='13' width='4' height='1'/%3E%3C/g%3E%3Crect x='8' y='0' width='1' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='6' y='2' width='3' height='1'/%3E%3Crect x='6' y='3' width='4' height='1'/%3E%3Crect x='13' y='3' width='1' height='1'/%3E%3Crect x='5' y='4' width='5' height='1'/%3E%3Crect x='12' y='4' width='2' height='1'/%3E%3Crect x='5' y='5' width='6' height='1'/%3E%3Crect x='12' y='5' width='3' height='1'/%3E%3Crect x='4' y='6' width='11' height='1'/%3E%3Crect x='3' y='7' width='13' height='2'/%3E%3Crect x='2' y='9' width='7' height='1'/%3E%3Crect x='11' y='9' width='5' height='1'/%3E%3Crect x='2' y='10' width='6' height='1'/%3E%3Crect x='12' y='10' width='4' height='1'/%3E%3Crect x='2' y='11' width='5' height='1'/%3E%3Crect x='13' y='11' width='3' height='1'/%3E%3Crect x='3' y='12' width='4' height='1'/%3E%3Crect x='13' y='12' width='2' height='1'/%3E%3Crect x='3' y='13' width='5' height='1'/%3E%3Crect x='12' y='13' width='3' height='1'/%3E%3Crect x='4' y='14' width='10' height='1'/%3E%3Crect x='5' y='15' width='8' height='1'/%3E%3C/svg%3E"); }
.tt-i--camera  { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ECamera%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='7' y='7' width='2' height='1'/%3E%3Crect x='6' y='8' width='4' height='2'/%3E%3Crect x='7' y='10' width='2' height='1'/%3E%3C/g%3E%3Crect x='5' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='12' height='1'/%3E%3Crect x='1' y='5' width='5' height='1'/%3E%3Crect x='10' y='5' width='5' height='1'/%3E%3Crect x='1' y='6' width='4' height='1'/%3E%3Crect x='11' y='6' width='1' height='1'/%3E%3Crect x='14' y='6' width='1' height='1'/%3E%3Crect x='1' y='7' width='3' height='4'/%3E%3Crect x='12' y='7' width='3' height='4'/%3E%3Crect x='1' y='11' width='4' height='1'/%3E%3Crect x='11' y='11' width='4' height='1'/%3E%3Crect x='1' y='12' width='5' height='1'/%3E%3Crect x='10' y='12' width='5' height='1'/%3E%3Crect x='2' y='13' width='12' height='1'/%3E%3C/svg%3E"); }
.tt-i--lock    { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ELock%3C/title%3E%3Crect x='5' y='1' width='6' height='1'/%3E%3Crect x='4' y='2' width='8' height='1'/%3E%3Crect x='3' y='3' width='3' height='1'/%3E%3Crect x='10' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='2' height='3'/%3E%3Crect x='11' y='4' width='2' height='3'/%3E%3Crect x='1' y='7' width='14' height='3'/%3E%3Crect x='1' y='10' width='5' height='1'/%3E%3Crect x='10' y='10' width='5' height='1'/%3E%3Crect x='1' y='11' width='6' height='2'/%3E%3Crect x='9' y='11' width='6' height='2'/%3E%3Crect x='1' y='13' width='14' height='2'/%3E%3C/svg%3E"); }
.tt-i--eye     { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EEye%3C/title%3E%3Crect x='5' y='3' width='6' height='1'/%3E%3Crect x='3' y='4' width='10' height='1'/%3E%3Crect x='2' y='5' width='4' height='1'/%3E%3Crect x='10' y='5' width='4' height='1'/%3E%3Crect x='1' y='6' width='3' height='1'/%3E%3Crect x='6' y='6' width='4' height='1'/%3E%3Crect x='12' y='6' width='3' height='1'/%3E%3Crect x='0' y='7' width='3' height='1'/%3E%3Crect x='5' y='7' width='6' height='1'/%3E%3Crect x='13' y='7' width='3' height='1'/%3E%3Crect x='1' y='8' width='3' height='1'/%3E%3Crect x='6' y='8' width='4' height='1'/%3E%3Crect x='12' y='8' width='3' height='1'/%3E%3Crect x='2' y='9' width='4' height='1'/%3E%3Crect x='10' y='9' width='4' height='1'/%3E%3Crect x='3' y='10' width='10' height='1'/%3E%3Crect x='5' y='11' width='6' height='1'/%3E%3C/svg%3E"); }
.tt-i--eye-off { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EEye off%3C/title%3E%3Crect x='14' y='1' width='2' height='1'/%3E%3Crect x='13' y='2' width='2' height='1'/%3E%3Crect x='5' y='3' width='6' height='1'/%3E%3Crect x='12' y='3' width='2' height='1'/%3E%3Crect x='3' y='4' width='7' height='1'/%3E%3Crect x='11' y='4' width='2' height='1'/%3E%3Crect x='2' y='5' width='4' height='1'/%3E%3Crect x='10' y='5' width='2' height='1'/%3E%3Crect x='13' y='5' width='1' height='1'/%3E%3Crect x='1' y='6' width='3' height='1'/%3E%3Crect x='6' y='6' width='2' height='1'/%3E%3Crect x='9' y='6' width='2' height='1'/%3E%3Crect x='12' y='6' width='3' height='1'/%3E%3Crect x='0' y='7' width='3' height='1'/%3E%3Crect x='5' y='7' width='2' height='1'/%3E%3Crect x='8' y='7' width='2' height='1'/%3E%3Crect x='13' y='7' width='3' height='1'/%3E%3Crect x='1' y='8' width='3' height='1'/%3E%3Crect x='7' y='8' width='2' height='1'/%3E%3Crect x='12' y='8' width='3' height='1'/%3E%3Crect x='2' y='9' width='3' height='1'/%3E%3Crect x='6' y='9' width='2' height='1'/%3E%3Crect x='10' y='9' width='4' height='1'/%3E%3Crect x='3' y='10' width='1' height='1'/%3E%3Crect x='5' y='10' width='2' height='1'/%3E%3Crect x='8' y='10' width='5' height='1'/%3E%3Crect x='4' y='11' width='2' height='1'/%3E%3Crect x='7' y='11' width='4' height='1'/%3E%3Crect x='3' y='12' width='2' height='1'/%3E%3Crect x='2' y='13' width='2' height='1'/%3E%3C/svg%3E"); }
.tt-i--star    { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EStar full%3C/title%3E%3Crect x='7' y='0' width='2' height='2'/%3E%3Crect x='6' y='2' width='4' height='2'/%3E%3Crect x='0' y='4' width='16' height='1'/%3E%3Crect x='1' y='5' width='14' height='1'/%3E%3Crect x='2' y='6' width='12' height='1'/%3E%3Crect x='3' y='7' width='10' height='1'/%3E%3Crect x='4' y='8' width='8' height='2'/%3E%3Crect x='3' y='10' width='10' height='2'/%3E%3Crect x='2' y='12' width='5' height='1'/%3E%3Crect x='9' y='12' width='5' height='1'/%3E%3Crect x='2' y='13' width='4' height='1'/%3E%3Crect x='10' y='13' width='4' height='1'/%3E%3Crect x='1' y='14' width='3' height='1'/%3E%3Crect x='12' y='14' width='3' height='1'/%3E%3Crect x='1' y='15' width='2' height='1'/%3E%3Crect x='13' y='15' width='2' height='1'/%3E%3C/svg%3E"); }
.tt-i--star-half  { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EStar half%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='8' y='2' width='1' height='2'/%3E%3Crect x='8' y='4' width='2' height='1'/%3E%3Crect x='8' y='5' width='6' height='1'/%3E%3Crect x='8' y='6' width='5' height='1'/%3E%3Crect x='8' y='7' width='4' height='1'/%3E%3Crect x='8' y='8' width='3' height='2'/%3E%3Crect x='8' y='10' width='4' height='1'/%3E%3Crect x='9' y='11' width='3' height='1'/%3E%3Crect x='10' y='12' width='3' height='1'/%3E%3Crect x='12' y='13' width='1' height='1'/%3E%3Crect x='13' y='14' width='1' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.55'%3E%3Crect x='8' y='0' width='1' height='2'/%3E%3Crect x='9' y='2' width='1' height='2'/%3E%3Crect x='10' y='4' width='6' height='1'/%3E%3Crect x='14' y='5' width='1' height='1'/%3E%3Crect x='13' y='6' width='1' height='1'/%3E%3Crect x='12' y='7' width='1' height='1'/%3E%3Crect x='11' y='8' width='1' height='2'/%3E%3Crect x='12' y='10' width='1' height='2'/%3E%3Crect x='8' y='11' width='1' height='1'/%3E%3Crect x='9' y='12' width='1' height='1'/%3E%3Crect x='13' y='12' width='1' height='2'/%3E%3Crect x='10' y='13' width='2' height='1'/%3E%3Crect x='12' y='14' width='1' height='1'/%3E%3Crect x='14' y='14' width='1' height='1'/%3E%3Crect x='13' y='15' width='2' height='1'/%3E%3C/g%3E%3Crect x='7' y='0' width='1' height='2'/%3E%3Crect x='6' y='2' width='2' height='2'/%3E%3Crect x='0' y='4' width='8' height='1'/%3E%3Crect x='1' y='5' width='7' height='1'/%3E%3Crect x='2' y='6' width='6' height='1'/%3E%3Crect x='3' y='7' width='5' height='1'/%3E%3Crect x='4' y='8' width='4' height='2'/%3E%3Crect x='3' y='10' width='5' height='2'/%3E%3Crect x='2' y='12' width='5' height='1'/%3E%3Crect x='2' y='13' width='4' height='1'/%3E%3Crect x='1' y='14' width='3' height='1'/%3E%3Crect x='1' y='15' width='2' height='1'/%3E%3C/svg%3E"); }
.tt-i--star-empty { --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EStar empty%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='7' y='2' width='2' height='2'/%3E%3Crect x='6' y='4' width='4' height='1'/%3E%3Crect x='2' y='5' width='12' height='1'/%3E%3Crect x='3' y='6' width='10' height='1'/%3E%3Crect x='4' y='7' width='8' height='1'/%3E%3Crect x='5' y='8' width='6' height='2'/%3E%3Crect x='4' y='10' width='8' height='1'/%3E%3Crect x='4' y='11' width='3' height='1'/%3E%3Crect x='9' y='11' width='3' height='1'/%3E%3Crect x='3' y='12' width='3' height='1'/%3E%3Crect x='10' y='12' width='3' height='1'/%3E%3Crect x='3' y='13' width='1' height='1'/%3E%3Crect x='12' y='13' width='1' height='1'/%3E%3Crect x='2' y='14' width='1' height='1'/%3E%3Crect x='13' y='14' width='1' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.55'%3E%3Crect x='7' y='0' width='2' height='2'/%3E%3Crect x='6' y='2' width='1' height='2'/%3E%3Crect x='9' y='2' width='1' height='2'/%3E%3Crect x='0' y='4' width='6' height='1'/%3E%3Crect x='10' y='4' width='6' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='14' y='5' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='13' y='6' width='1' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%3E%3Crect x='12' y='7' width='1' height='1'/%3E%3Crect x='4' y='8' width='1' height='2'/%3E%3Crect x='11' y='8' width='1' height='2'/%3E%3Crect x='3' y='10' width='1' height='2'/%3E%3Crect x='12' y='10' width='1' height='2'/%3E%3Crect x='7' y='11' width='2' height='1'/%3E%3Crect x='2' y='12' width='1' height='2'/%3E%3Crect x='6' y='12' width='1' height='1'/%3E%3Crect x='9' y='12' width='1' height='1'/%3E%3Crect x='13' y='12' width='1' height='2'/%3E%3Crect x='4' y='13' width='2' height='1'/%3E%3Crect x='10' y='13' width='2' height='1'/%3E%3Crect x='1' y='14' width='1' height='1'/%3E%3Crect x='3' y='14' width='1' height='1'/%3E%3Crect x='12' y='14' width='1' height='1'/%3E%3Crect x='14' y='14' width='1' height='1'/%3E%3Crect x='1' y='15' width='2' height='1'/%3E%3Crect x='13' y='15' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E"); }
.tt-i--arrow-left { transform: scaleX(-1); }

/* ---------------------------------------------------------------- 1. rating stars
   <span class="tt-stars" style="--v:3.5" role="img" aria-label="3,5 из 5"></span>
   10-star: add style="--n:10;--v:7". Half stars: any .5 value. */
.tt-stars {
  --n: 5; --v: 0;
  --cell: calc(var(--tt-px) * 18);
  position: relative; display: inline-block; vertical-align: middle;
  width: calc(var(--n) * var(--cell)); height: calc(var(--tt-px) * 16);
  color: var(--tt-pink); image-rendering: pixelated;
}
.tt-stars::before, .tt-stars::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' width='36' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EStar empty cell 18x16 (1u side margin, for repeat-x)%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='8' y='2' width='2' height='2'/%3E%3Crect x='7' y='4' width='4' height='1'/%3E%3Crect x='3' y='5' width='12' height='1'/%3E%3Crect x='4' y='6' width='10' height='1'/%3E%3Crect x='5' y='7' width='8' height='1'/%3E%3Crect x='6' y='8' width='6' height='2'/%3E%3Crect x='5' y='10' width='8' height='1'/%3E%3Crect x='5' y='11' width='3' height='1'/%3E%3Crect x='10' y='11' width='3' height='1'/%3E%3Crect x='4' y='12' width='3' height='1'/%3E%3Crect x='11' y='12' width='3' height='1'/%3E%3Crect x='4' y='13' width='1' height='1'/%3E%3Crect x='13' y='13' width='1' height='1'/%3E%3Crect x='3' y='14' width='1' height='1'/%3E%3Crect x='14' y='14' width='1' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.55'%3E%3Crect x='8' y='0' width='2' height='2'/%3E%3Crect x='7' y='2' width='1' height='2'/%3E%3Crect x='10' y='2' width='1' height='2'/%3E%3Crect x='1' y='4' width='6' height='1'/%3E%3Crect x='11' y='4' width='6' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='15' y='5' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='14' y='6' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='13' y='7' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='2'/%3E%3Crect x='12' y='8' width='1' height='2'/%3E%3Crect x='4' y='10' width='1' height='2'/%3E%3Crect x='13' y='10' width='1' height='2'/%3E%3Crect x='8' y='11' width='2' height='1'/%3E%3Crect x='3' y='12' width='1' height='2'/%3E%3Crect x='7' y='12' width='1' height='1'/%3E%3Crect x='10' y='12' width='1' height='1'/%3E%3Crect x='14' y='12' width='1' height='2'/%3E%3Crect x='5' y='13' width='2' height='1'/%3E%3Crect x='11' y='13' width='2' height='1'/%3E%3Crect x='2' y='14' width='1' height='1'/%3E%3Crect x='4' y='14' width='1' height='1'/%3E%3Crect x='13' y='14' width='1' height='1'/%3E%3Crect x='15' y='14' width='1' height='1'/%3E%3Crect x='2' y='15' width='2' height='1'/%3E%3Crect x='14' y='15' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / var(--cell) 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' width='36' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EStar empty cell 18x16 (1u side margin, for repeat-x)%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='8' y='2' width='2' height='2'/%3E%3Crect x='7' y='4' width='4' height='1'/%3E%3Crect x='3' y='5' width='12' height='1'/%3E%3Crect x='4' y='6' width='10' height='1'/%3E%3Crect x='5' y='7' width='8' height='1'/%3E%3Crect x='6' y='8' width='6' height='2'/%3E%3Crect x='5' y='10' width='8' height='1'/%3E%3Crect x='5' y='11' width='3' height='1'/%3E%3Crect x='10' y='11' width='3' height='1'/%3E%3Crect x='4' y='12' width='3' height='1'/%3E%3Crect x='11' y='12' width='3' height='1'/%3E%3Crect x='4' y='13' width='1' height='1'/%3E%3Crect x='13' y='13' width='1' height='1'/%3E%3Crect x='3' y='14' width='1' height='1'/%3E%3Crect x='14' y='14' width='1' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.55'%3E%3Crect x='8' y='0' width='2' height='2'/%3E%3Crect x='7' y='2' width='1' height='2'/%3E%3Crect x='10' y='2' width='1' height='2'/%3E%3Crect x='1' y='4' width='6' height='1'/%3E%3Crect x='11' y='4' width='6' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='15' y='5' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='14' y='6' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='13' y='7' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='2'/%3E%3Crect x='12' y='8' width='1' height='2'/%3E%3Crect x='4' y='10' width='1' height='2'/%3E%3Crect x='13' y='10' width='1' height='2'/%3E%3Crect x='8' y='11' width='2' height='1'/%3E%3Crect x='3' y='12' width='1' height='2'/%3E%3Crect x='7' y='12' width='1' height='1'/%3E%3Crect x='10' y='12' width='1' height='1'/%3E%3Crect x='14' y='12' width='1' height='2'/%3E%3Crect x='5' y='13' width='2' height='1'/%3E%3Crect x='11' y='13' width='2' height='1'/%3E%3Crect x='2' y='14' width='1' height='1'/%3E%3Crect x='4' y='14' width='1' height='1'/%3E%3Crect x='13' y='14' width='1' height='1'/%3E%3Crect x='15' y='14' width='1' height='1'/%3E%3Crect x='2' y='15' width='2' height='1'/%3E%3Crect x='14' y='15' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / var(--cell) 100% repeat-x;
}
.tt-stars::before { width: 100%; background: var(--tt-muted); }
.tt-stars::after {
  width: calc(var(--v) * var(--cell)); background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' width='36' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EStar full cell 18x16 (1u side margin, for repeat-x)%3C/title%3E%3Crect x='8' y='0' width='2' height='2'/%3E%3Crect x='7' y='2' width='4' height='2'/%3E%3Crect x='1' y='4' width='16' height='1'/%3E%3Crect x='2' y='5' width='14' height='1'/%3E%3Crect x='3' y='6' width='12' height='1'/%3E%3Crect x='4' y='7' width='10' height='1'/%3E%3Crect x='5' y='8' width='8' height='2'/%3E%3Crect x='4' y='10' width='10' height='2'/%3E%3Crect x='3' y='12' width='5' height='1'/%3E%3Crect x='10' y='12' width='5' height='1'/%3E%3Crect x='3' y='13' width='4' height='1'/%3E%3Crect x='11' y='13' width='4' height='1'/%3E%3Crect x='2' y='14' width='3' height='1'/%3E%3Crect x='13' y='14' width='3' height='1'/%3E%3Crect x='2' y='15' width='2' height='1'/%3E%3Crect x='14' y='15' width='2' height='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' width='36' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EStar full cell 18x16 (1u side margin, for repeat-x)%3C/title%3E%3Crect x='8' y='0' width='2' height='2'/%3E%3Crect x='7' y='2' width='4' height='2'/%3E%3Crect x='1' y='4' width='16' height='1'/%3E%3Crect x='2' y='5' width='14' height='1'/%3E%3Crect x='3' y='6' width='12' height='1'/%3E%3Crect x='4' y='7' width='10' height='1'/%3E%3Crect x='5' y='8' width='8' height='2'/%3E%3Crect x='4' y='10' width='10' height='2'/%3E%3Crect x='3' y='12' width='5' height='1'/%3E%3Crect x='10' y='12' width='5' height='1'/%3E%3Crect x='3' y='13' width='4' height='1'/%3E%3Crect x='11' y='13' width='4' height='1'/%3E%3Crect x='2' y='14' width='3' height='1'/%3E%3Crect x='13' y='14' width='3' height='1'/%3E%3Crect x='2' y='15' width='2' height='1'/%3E%3Crect x='14' y='15' width='2' height='1'/%3E%3C/svg%3E");
}
.tt-stars--red { color: var(--tt-red); }
.tt-stars--s { --tt-px: 1px; }
.tt-stars--10 { --n: 10; }
@media (max-width: 420px) { .tt-stars--10 { --tt-px: 1px; } } /* 10 big stars = 360px: drop to 1x on phones */
.tt-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tt-rating__val { font: 8px/1 var(--tt-pixel); color: var(--tt-ink); letter-spacing: .06em; }
.tt-rating__lab { font: 8px/1.6 var(--tt-pixel); color: var(--tt-muted); letter-spacing: .06em; }

/* ---------------------------------------------------------------- 2. dividers
   <hr class="tt-divider tt-divider--hearts"> */
.tt-divider {
  --w: 8; --h: 7; --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' width='16' height='14' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EDivider tile line%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='0' y='5' width='8' height='1'/%3E%3C/g%3E%3Crect x='0' y='1' width='8' height='2'/%3E%3C/svg%3E");
  display: block; border: 0; margin: 20px 0; padding: 0; color: var(--tt-pink);
  height: calc(var(--h) * var(--tt-px));
  background: currentColor;
  -webkit-mask: var(--tt-mask) 50% 0 / calc(var(--w) * var(--tt-px)) 100% repeat-x;
  mask: var(--tt-mask) 50% 0 / calc(var(--w) * var(--tt-px)) 100% repeat-x;
  image-rendering: pixelated;
}
.tt-divider--line    { --w: 8;  --h: 7; --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' width='16' height='14' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EDivider tile line%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='0' y='5' width='8' height='1'/%3E%3C/g%3E%3Crect x='0' y='1' width='8' height='2'/%3E%3C/svg%3E"); }
.tt-divider--dots    { --w: 16; --h: 6; --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6' width='32' height='12' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EDivider tile dots%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='11' y='2' width='2' height='2'/%3E%3C/g%3E%3Crect x='3' y='2' width='2' height='2'/%3E%3C/svg%3E"); }
.tt-divider--hearts  { --w: 24; --h: 9; --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9' width='48' height='18' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EDivider tile hearts%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='2' y='4' width='2' height='2'/%3E%3Crect x='20' y='4' width='2' height='2'/%3E%3C/g%3E%3Crect x='9' y='1' width='2' height='1'/%3E%3Crect x='12' y='1' width='2' height='1'/%3E%3Crect x='8' y='2' width='7' height='2'/%3E%3Crect x='9' y='4' width='5' height='1'/%3E%3Crect x='10' y='5' width='3' height='1'/%3E%3Crect x='11' y='6' width='1' height='1'/%3E%3C/svg%3E"); }
.tt-divider--stars   { --w: 24; --h: 9; --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9' width='48' height='18' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EDivider tile stars%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='0' y='4' width='1' height='1'/%3E%3Crect x='23' y='4' width='1' height='1'/%3E%3C/g%3E%3Crect x='11' y='1' width='1' height='2'/%3E%3Crect x='10' y='3' width='3' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='8' y='4' width='7' height='1'/%3E%3Crect x='21' y='4' width='1' height='1'/%3E%3Crect x='10' y='5' width='3' height='1'/%3E%3Crect x='11' y='6' width='1' height='2'/%3E%3C/svg%3E"); }
.tt-divider--slashes { --w: 24; --h: 8; --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='48' height='16' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EDivider tile slashes%3C/title%3E%3Cg fill-opacity='0.55'%3E%3Crect x='17' y='0' width='2' height='1'/%3E%3Crect x='16' y='1' width='2' height='1'/%3E%3Crect x='15' y='2' width='2' height='1'/%3E%3Crect x='14' y='3' width='2' height='1'/%3E%3Crect x='13' y='4' width='2' height='1'/%3E%3Crect x='12' y='5' width='2' height='1'/%3E%3Crect x='11' y='6' width='2' height='1'/%3E%3Crect x='10' y='7' width='2' height='1'/%3E%3C/g%3E%3Crect x='7' y='0' width='2' height='1'/%3E%3Crect x='12' y='0' width='2' height='1'/%3E%3Crect x='6' y='1' width='2' height='1'/%3E%3Crect x='11' y='1' width='2' height='1'/%3E%3Crect x='5' y='2' width='2' height='1'/%3E%3Crect x='10' y='2' width='2' height='1'/%3E%3Crect x='4' y='3' width='2' height='1'/%3E%3Crect x='9' y='3' width='2' height='1'/%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='8' y='4' width='2' height='1'/%3E%3Crect x='2' y='5' width='2' height='1'/%3E%3Crect x='7' y='5' width='2' height='1'/%3E%3Crect x='1' y='6' width='2' height='1'/%3E%3Crect x='6' y='6' width='2' height='1'/%3E%3Crect x='0' y='7' width='2' height='1'/%3E%3Crect x='5' y='7' width='2' height='1'/%3E%3C/svg%3E"); }
.tt-divider--zigzag  { --w: 8;  --h: 6; --tt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' width='16' height='12' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EDivider tile zigzag%3C/title%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='2' height='1'/%3E%3Crect x='7' y='1' width='1' height='1'/%3E%3Crect x='1' y='2' width='2' height='1'/%3E%3Crect x='6' y='2' width='2' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3Crect x='5' y='3' width='2' height='1'/%3E%3Crect x='3' y='4' width='3' height='1'/%3E%3Crect x='4' y='5' width='1' height='1'/%3E%3C/svg%3E"); }
.tt-divider--red { color: var(--tt-red); }
.tt-divider--muted { color: var(--tt-muted); }

/* ---------------------------------------------------------------- 3. badges / stickers
   <span class="tt-badge">NEW</span>  .tt-badge--hot .tt-badge--18 .tt-badge--exclusive (double frame)
   tilt: .tt-badge--l / .tt-badge--r      empty frame: <span class="tt-badge" data-text="СВОЙ ТЕКСТ"></span> */
.tt-badge {
  --c: var(--tt-pink); --tilt: 0deg;
  position: relative; display: inline-block; margin: var(--tt-px);
  padding: 8px 10px 6px; vertical-align: middle;
  font: 16px/16px var(--tt-pixel); letter-spacing: 0; white-space: nowrap;
  color: var(--tt-ink); text-transform: uppercase;
  background: color-mix(in srgb, var(--c) 14%, var(--tt-bg));
  box-shadow: 0 calc(var(--tt-px) * -1) 0 0 var(--c), 0 var(--tt-px) 0 0 var(--c), calc(var(--tt-px) * -1) 0 0 0 var(--c), var(--tt-px) 0 0 0 var(--c), calc(var(--tt-px) * 2) calc(var(--tt-px) * 2) 0 0 color-mix(in srgb, var(--c) 30%, transparent);
  transform: rotate(var(--tilt));
}
.tt-badge[data-text]:empty::before { content: attr(data-text); }
.tt-badge--hot, .tt-badge--18 { --c: var(--tt-red); }
.tt-badge--l { --tilt: -3deg; }
.tt-badge--r { --tilt: 3deg; }
.tt-badge--s { font-size: 8px; line-height: 8px; padding: 6px 8px 4px; }
.tt-badge--exclusive { margin: calc(var(--tt-px) * 3); }
.tt-badge--exclusive::after {
  content: ""; position: absolute; inset: calc(var(--tt-px) * -2); pointer-events: none;
  box-shadow: 0 calc(var(--tt-px) * -1) 0 0 color-mix(in srgb, var(--c) 55%, transparent), 0 var(--tt-px) 0 0 color-mix(in srgb, var(--c) 55%, transparent), calc(var(--tt-px) * -1) 0 0 0 color-mix(in srgb, var(--c) 55%, transparent), var(--tt-px) 0 0 0 color-mix(in srgb, var(--c) 55%, transparent);
}

/* ---------------------------------------------------------------- 4. neon quote
   <blockquote class="tt-quote-neon"><p>…</p><cite>— <a>Имя</a></cite></blockquote>
   guillemets: add .tt-quote-neon--guillemets */
.tt-quote-neon {
  --qa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15' width='40' height='30' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ECurly quote “%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='5' y='1' width='6' height='1'/%3E%3Crect x='13' y='1' width='6' height='1'/%3E%3Crect x='3' y='2' width='3' height='1'/%3E%3Crect x='10' y='2' width='4' height='1'/%3E%3Crect x='18' y='2' width='1' height='3'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3Crect x='10' y='3' width='2' height='1'/%3E%3Crect x='1' y='4' width='2' height='1'/%3E%3Crect x='10' y='4' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='7'/%3E%3Crect x='9' y='5' width='1' height='2'/%3E%3Crect x='17' y='5' width='2' height='2'/%3E%3Crect x='18' y='7' width='1' height='5'/%3E%3Crect x='1' y='12' width='2' height='1'/%3E%3Crect x='9' y='12' width='2' height='1'/%3E%3Crect x='17' y='12' width='2' height='1'/%3E%3Crect x='2' y='13' width='16' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.28'%3E%3Crect x='6' y='2' width='4' height='1'/%3E%3Crect x='14' y='2' width='4' height='1'/%3E%3Crect x='4' y='3' width='3' height='1'/%3E%3Crect x='9' y='3' width='1' height='1'/%3E%3Crect x='12' y='3' width='3' height='1'/%3E%3Crect x='17' y='3' width='1' height='1'/%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='8' y='4' width='2' height='1'/%3E%3Crect x='11' y='4' width='2' height='1'/%3E%3Crect x='16' y='4' width='2' height='1'/%3E%3Crect x='2' y='5' width='2' height='1'/%3E%3Crect x='7' y='5' width='2' height='1'/%3E%3Crect x='10' y='5' width='2' height='1'/%3E%3Crect x='15' y='5' width='2' height='1'/%3E%3Crect x='2' y='6' width='1' height='5'/%3E%3Crect x='6' y='6' width='3' height='1'/%3E%3Crect x='10' y='6' width='1' height='1'/%3E%3Crect x='14' y='6' width='3' height='1'/%3E%3Crect x='8' y='7' width='3' height='1'/%3E%3Crect x='16' y='7' width='2' height='1'/%3E%3Crect x='9' y='8' width='2' height='3'/%3E%3Crect x='17' y='8' width='1' height='3'/%3E%3Crect x='2' y='11' width='2' height='1'/%3E%3Crect x='8' y='11' width='4' height='1'/%3E%3Crect x='16' y='11' width='2' height='1'/%3E%3Crect x='3' y='12' width='6' height='1'/%3E%3Crect x='11' y='12' width='6' height='1'/%3E%3C/g%3E%3Crect x='7' y='3' width='2' height='1'/%3E%3Crect x='15' y='3' width='2' height='1'/%3E%3Crect x='5' y='4' width='3' height='1'/%3E%3Crect x='13' y='4' width='3' height='1'/%3E%3Crect x='4' y='5' width='3' height='1'/%3E%3Crect x='12' y='5' width='3' height='1'/%3E%3Crect x='3' y='6' width='3' height='1'/%3E%3Crect x='11' y='6' width='3' height='1'/%3E%3Crect x='3' y='7' width='5' height='1'/%3E%3Crect x='11' y='7' width='5' height='1'/%3E%3Crect x='3' y='8' width='6' height='3'/%3E%3Crect x='11' y='8' width='6' height='3'/%3E%3Crect x='4' y='11' width='4' height='1'/%3E%3Crect x='12' y='11' width='4' height='1'/%3E%3C/svg%3E"); --qb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15' width='40' height='30' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ECurly quote ”%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='2' y='1' width='16' height='1'/%3E%3Crect x='1' y='2' width='2' height='1'/%3E%3Crect x='9' y='2' width='2' height='1'/%3E%3Crect x='17' y='2' width='2' height='1'/%3E%3Crect x='1' y='3' width='1' height='5'/%3E%3Crect x='18' y='3' width='1' height='7'/%3E%3Crect x='1' y='8' width='2' height='2'/%3E%3Crect x='10' y='8' width='1' height='2'/%3E%3Crect x='1' y='10' width='1' height='3'/%3E%3Crect x='9' y='10' width='1' height='1'/%3E%3Crect x='17' y='10' width='2' height='1'/%3E%3Crect x='8' y='11' width='2' height='1'/%3E%3Crect x='16' y='11' width='2' height='1'/%3E%3Crect x='6' y='12' width='4' height='1'/%3E%3Crect x='14' y='12' width='3' height='1'/%3E%3Crect x='1' y='13' width='6' height='1'/%3E%3Crect x='9' y='13' width='6' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.28'%3E%3Crect x='3' y='2' width='6' height='1'/%3E%3Crect x='11' y='2' width='6' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3Crect x='8' y='3' width='4' height='1'/%3E%3Crect x='16' y='3' width='2' height='1'/%3E%3Crect x='2' y='4' width='1' height='3'/%3E%3Crect x='9' y='4' width='2' height='3'/%3E%3Crect x='17' y='4' width='1' height='5'/%3E%3Crect x='2' y='7' width='2' height='1'/%3E%3Crect x='9' y='7' width='3' height='1'/%3E%3Crect x='3' y='8' width='3' height='1'/%3E%3Crect x='9' y='8' width='1' height='1'/%3E%3Crect x='11' y='8' width='3' height='1'/%3E%3Crect x='3' y='9' width='2' height='1'/%3E%3Crect x='8' y='9' width='2' height='1'/%3E%3Crect x='11' y='9' width='2' height='1'/%3E%3Crect x='16' y='9' width='2' height='1'/%3E%3Crect x='2' y='10' width='2' height='1'/%3E%3Crect x='7' y='10' width='2' height='1'/%3E%3Crect x='10' y='10' width='2' height='1'/%3E%3Crect x='15' y='10' width='2' height='1'/%3E%3Crect x='2' y='11' width='1' height='1'/%3E%3Crect x='5' y='11' width='3' height='1'/%3E%3Crect x='10' y='11' width='1' height='1'/%3E%3Crect x='13' y='11' width='3' height='1'/%3E%3Crect x='2' y='12' width='4' height='1'/%3E%3Crect x='10' y='12' width='4' height='1'/%3E%3C/g%3E%3Crect x='4' y='3' width='4' height='1'/%3E%3Crect x='12' y='3' width='4' height='1'/%3E%3Crect x='3' y='4' width='6' height='3'/%3E%3Crect x='11' y='4' width='6' height='3'/%3E%3Crect x='4' y='7' width='5' height='1'/%3E%3Crect x='12' y='7' width='5' height='1'/%3E%3Crect x='6' y='8' width='3' height='1'/%3E%3Crect x='14' y='8' width='3' height='1'/%3E%3Crect x='5' y='9' width='3' height='1'/%3E%3Crect x='13' y='9' width='3' height='1'/%3E%3Crect x='4' y='10' width='3' height='1'/%3E%3Crect x='12' y='10' width='3' height='1'/%3E%3Crect x='3' y='11' width='2' height='1'/%3E%3Crect x='11' y='11' width='2' height='1'/%3E%3C/svg%3E");
  --qw: 40px; --qh: 30px;
  position: relative; margin: 24px 0; padding: 44px 8px 44px 8px; color: var(--tt-pink);
}
.tt-quote-neon--guillemets { --qa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17' width='40' height='34' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EGuillemet «%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='6' y='1' width='13' height='1'/%3E%3Crect x='5' y='2' width='2' height='1'/%3E%3Crect x='12' y='2' width='1' height='1'/%3E%3Crect x='18' y='2' width='1' height='3'/%3E%3Crect x='4' y='3' width='2' height='1'/%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='2' y='5' width='2' height='1'/%3E%3Crect x='17' y='5' width='2' height='1'/%3E%3Crect x='1' y='6' width='2' height='1'/%3E%3Crect x='16' y='6' width='2' height='1'/%3E%3Crect x='1' y='7' width='1' height='3'/%3E%3Crect x='15' y='7' width='2' height='1'/%3E%3Crect x='14' y='8' width='2' height='1'/%3E%3Crect x='15' y='9' width='2' height='1'/%3E%3Crect x='1' y='10' width='2' height='1'/%3E%3Crect x='16' y='10' width='2' height='1'/%3E%3Crect x='2' y='11' width='2' height='1'/%3E%3Crect x='17' y='11' width='2' height='1'/%3E%3Crect x='3' y='12' width='2' height='1'/%3E%3Crect x='18' y='12' width='1' height='3'/%3E%3Crect x='4' y='13' width='2' height='1'/%3E%3Crect x='5' y='14' width='2' height='1'/%3E%3Crect x='12' y='14' width='1' height='1'/%3E%3Crect x='6' y='15' width='13' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.28'%3E%3Crect x='7' y='2' width='5' height='1'/%3E%3Crect x='13' y='2' width='5' height='1'/%3E%3Crect x='6' y='3' width='2' height='1'/%3E%3Crect x='11' y='3' width='3' height='1'/%3E%3Crect x='17' y='3' width='1' height='1'/%3E%3Crect x='5' y='4' width='2' height='1'/%3E%3Crect x='10' y='4' width='3' height='1'/%3E%3Crect x='16' y='4' width='2' height='1'/%3E%3Crect x='4' y='5' width='2' height='1'/%3E%3Crect x='9' y='5' width='3' height='1'/%3E%3Crect x='15' y='5' width='2' height='1'/%3E%3Crect x='3' y='6' width='2' height='1'/%3E%3Crect x='8' y='6' width='3' height='1'/%3E%3Crect x='14' y='6' width='2' height='1'/%3E%3Crect x='2' y='7' width='2' height='1'/%3E%3Crect x='7' y='7' width='3' height='1'/%3E%3Crect x='13' y='7' width='2' height='1'/%3E%3Crect x='2' y='8' width='1' height='1'/%3E%3Crect x='6' y='8' width='3' height='1'/%3E%3Crect x='12' y='8' width='2' height='1'/%3E%3Crect x='2' y='9' width='2' height='1'/%3E%3Crect x='7' y='9' width='3' height='1'/%3E%3Crect x='13' y='9' width='2' height='1'/%3E%3Crect x='3' y='10' width='2' height='1'/%3E%3Crect x='8' y='10' width='3' height='1'/%3E%3Crect x='14' y='10' width='2' height='1'/%3E%3Crect x='4' y='11' width='2' height='1'/%3E%3Crect x='9' y='11' width='3' height='1'/%3E%3Crect x='15' y='11' width='2' height='1'/%3E%3Crect x='5' y='12' width='2' height='1'/%3E%3Crect x='10' y='12' width='3' height='1'/%3E%3Crect x='16' y='12' width='2' height='1'/%3E%3Crect x='6' y='13' width='2' height='1'/%3E%3Crect x='11' y='13' width='3' height='1'/%3E%3Crect x='17' y='13' width='1' height='1'/%3E%3Crect x='7' y='14' width='5' height='1'/%3E%3Crect x='13' y='14' width='5' height='1'/%3E%3C/g%3E%3Crect x='8' y='3' width='3' height='1'/%3E%3Crect x='14' y='3' width='3' height='1'/%3E%3Crect x='7' y='4' width='3' height='1'/%3E%3Crect x='13' y='4' width='3' height='1'/%3E%3Crect x='6' y='5' width='3' height='1'/%3E%3Crect x='12' y='5' width='3' height='1'/%3E%3Crect x='5' y='6' width='3' height='1'/%3E%3Crect x='11' y='6' width='3' height='1'/%3E%3Crect x='4' y='7' width='3' height='1'/%3E%3Crect x='10' y='7' width='3' height='1'/%3E%3Crect x='3' y='8' width='3' height='1'/%3E%3Crect x='9' y='8' width='3' height='1'/%3E%3Crect x='4' y='9' width='3' height='1'/%3E%3Crect x='10' y='9' width='3' height='1'/%3E%3Crect x='5' y='10' width='3' height='1'/%3E%3Crect x='11' y='10' width='3' height='1'/%3E%3Crect x='6' y='11' width='3' height='1'/%3E%3Crect x='12' y='11' width='3' height='1'/%3E%3Crect x='7' y='12' width='3' height='1'/%3E%3Crect x='13' y='12' width='3' height='1'/%3E%3Crect x='8' y='13' width='3' height='1'/%3E%3Crect x='14' y='13' width='3' height='1'/%3E%3C/svg%3E"); --qb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17' width='40' height='34' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EGuillemet »%3C/title%3E%3Cg fill-opacity='0.14'%3E%3Crect x='1' y='1' width='13' height='1'/%3E%3Crect x='1' y='2' width='1' height='3'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3Crect x='13' y='2' width='2' height='1'/%3E%3Crect x='14' y='3' width='2' height='1'/%3E%3Crect x='15' y='4' width='2' height='1'/%3E%3Crect x='1' y='5' width='2' height='1'/%3E%3Crect x='16' y='5' width='2' height='1'/%3E%3Crect x='2' y='6' width='2' height='1'/%3E%3Crect x='17' y='6' width='2' height='1'/%3E%3Crect x='3' y='7' width='2' height='1'/%3E%3Crect x='18' y='7' width='1' height='3'/%3E%3Crect x='4' y='8' width='2' height='1'/%3E%3Crect x='3' y='9' width='2' height='1'/%3E%3Crect x='2' y='10' width='2' height='1'/%3E%3Crect x='17' y='10' width='2' height='1'/%3E%3Crect x='1' y='11' width='2' height='1'/%3E%3Crect x='16' y='11' width='2' height='1'/%3E%3Crect x='1' y='12' width='1' height='3'/%3E%3Crect x='15' y='12' width='2' height='1'/%3E%3Crect x='14' y='13' width='2' height='1'/%3E%3Crect x='7' y='14' width='1' height='1'/%3E%3Crect x='13' y='14' width='2' height='1'/%3E%3Crect x='1' y='15' width='13' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.28'%3E%3Crect x='2' y='2' width='5' height='1'/%3E%3Crect x='8' y='2' width='5' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='6' y='3' width='3' height='1'/%3E%3Crect x='12' y='3' width='2' height='1'/%3E%3Crect x='2' y='4' width='2' height='1'/%3E%3Crect x='7' y='4' width='3' height='1'/%3E%3Crect x='13' y='4' width='2' height='1'/%3E%3Crect x='3' y='5' width='2' height='1'/%3E%3Crect x='8' y='5' width='3' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='4' y='6' width='2' height='1'/%3E%3Crect x='9' y='6' width='3' height='1'/%3E%3Crect x='15' y='6' width='2' height='1'/%3E%3Crect x='5' y='7' width='2' height='1'/%3E%3Crect x='10' y='7' width='3' height='1'/%3E%3Crect x='16' y='7' width='2' height='1'/%3E%3Crect x='6' y='8' width='2' height='1'/%3E%3Crect x='11' y='8' width='3' height='1'/%3E%3Crect x='17' y='8' width='1' height='1'/%3E%3Crect x='5' y='9' width='2' height='1'/%3E%3Crect x='10' y='9' width='3' height='1'/%3E%3Crect x='16' y='9' width='2' height='1'/%3E%3Crect x='4' y='10' width='2' height='1'/%3E%3Crect x='9' y='10' width='3' height='1'/%3E%3Crect x='15' y='10' width='2' height='1'/%3E%3Crect x='3' y='11' width='2' height='1'/%3E%3Crect x='8' y='11' width='3' height='1'/%3E%3Crect x='14' y='11' width='2' height='1'/%3E%3Crect x='2' y='12' width='2' height='1'/%3E%3Crect x='7' y='12' width='3' height='1'/%3E%3Crect x='13' y='12' width='2' height='1'/%3E%3Crect x='2' y='13' width='1' height='1'/%3E%3Crect x='6' y='13' width='3' height='1'/%3E%3Crect x='12' y='13' width='2' height='1'/%3E%3Crect x='2' y='14' width='5' height='1'/%3E%3Crect x='8' y='14' width='5' height='1'/%3E%3C/g%3E%3Crect x='3' y='3' width='3' height='1'/%3E%3Crect x='9' y='3' width='3' height='1'/%3E%3Crect x='4' y='4' width='3' height='1'/%3E%3Crect x='10' y='4' width='3' height='1'/%3E%3Crect x='5' y='5' width='3' height='1'/%3E%3Crect x='11' y='5' width='3' height='1'/%3E%3Crect x='6' y='6' width='3' height='1'/%3E%3Crect x='12' y='6' width='3' height='1'/%3E%3Crect x='7' y='7' width='3' height='1'/%3E%3Crect x='13' y='7' width='3' height='1'/%3E%3Crect x='8' y='8' width='3' height='1'/%3E%3Crect x='14' y='8' width='3' height='1'/%3E%3Crect x='7' y='9' width='3' height='1'/%3E%3Crect x='13' y='9' width='3' height='1'/%3E%3Crect x='6' y='10' width='3' height='1'/%3E%3Crect x='12' y='10' width='3' height='1'/%3E%3Crect x='5' y='11' width='3' height='1'/%3E%3Crect x='11' y='11' width='3' height='1'/%3E%3Crect x='4' y='12' width='3' height='1'/%3E%3Crect x='10' y='12' width='3' height='1'/%3E%3Crect x='3' y='13' width='3' height='1'/%3E%3Crect x='9' y='13' width='3' height='1'/%3E%3C/svg%3E"); --qw: 38px; --qh: 38px; }
.tt-quote-neon::before, .tt-quote-neon::after {
  content: ""; position: absolute; width: var(--qw); height: var(--qh);
  background: currentColor; image-rendering: pixelated;
  -webkit-mask: var(--qa) 0 0 / 100% 100% no-repeat; mask: var(--qa) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent));
}
.tt-quote-neon::before { left: 0; top: 0; }
.tt-quote-neon::after { right: 0; bottom: 0; -webkit-mask-image: var(--qb); mask-image: var(--qb); }
.tt-quote-neon p {
  margin: 0; padding: 0 calc(var(--qw) + 8px) 0 0;
  font: italic 400 clamp(20px, 3.4vw, 30px)/1.3 var(--tt-serif); color: var(--tt-ink);
  text-shadow: 0 0 14px color-mix(in srgb, var(--tt-pink) 38%, transparent), 0 0 2px color-mix(in srgb, var(--tt-pink) 30%, transparent);
}
.tt-quote-neon cite {
  display: block; margin-top: 16px; font: normal 8px/1.8 var(--tt-pixel); letter-spacing: .08em;
  color: var(--tt-muted); text-transform: uppercase;
}
.tt-quote-neon cite a { color: var(--tt-pink); text-decoration: none; border-bottom: 2px solid currentColor; }
.tt-quote-neon--red { color: var(--tt-red); }

/* ---------------------------------------------------------------- 5. mini timer (frame + separators; digits are server-rendered)
   <div class="tt-timer"><div class="tt-timer__cell"><b>04</b><i>ДН</i></div><span class="tt-timer__sep"></span>…</div> */
.tt-timer { display: inline-flex; align-items: flex-start; color: var(--tt-pink); }
.tt-timer__cell {
  box-sizing: border-box; flex: none; margin: var(--tt-px);
  width: calc(var(--tt-px) * 24); height: calc(var(--tt-px) * 22);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--tt-plate); text-align: center;
  box-shadow: 0 calc(var(--tt-px) * -1) 0 0 currentColor, 0 var(--tt-px) 0 0 currentColor, calc(var(--tt-px) * -1) 0 0 0 currentColor, var(--tt-px) 0 0 0 currentColor;
  position: relative;
}
.tt-timer__cell::before, .tt-timer__cell::after {
  content: ""; position: absolute; width: var(--tt-px); height: var(--tt-px);
  background: color-mix(in srgb, currentColor 55%, transparent);
}
.tt-timer__cell::before { left: calc(var(--tt-px) * 2); top: calc(var(--tt-px) * 2); box-shadow: calc(var(--tt-px) * 18) 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
.tt-timer__cell::after { left: calc(var(--tt-px) * 2); bottom: calc(var(--tt-px) * 2); box-shadow: calc(var(--tt-px) * 18) 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
.tt-timer__cell b { font: 400 16px/16px var(--tt-pixel); color: var(--tt-red); letter-spacing: 0; }
.tt-timer__cell i { font: normal 8px/8px var(--tt-pixel); color: var(--tt-muted); letter-spacing: .04em; }
.tt-timer__sep {
  flex: none; width: calc(var(--tt-px) * 6); height: calc(var(--tt-px) * 22); margin: var(--tt-px) 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 24' width='12' height='48' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ETimer colon%3C/title%3E%3Crect x='2' y='7' width='2' height='2'/%3E%3Crect x='2' y='15' width='2' height='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 24' width='12' height='48' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ETimer colon%3C/title%3E%3Crect x='2' y='7' width='2' height='2'/%3E%3Crect x='2' y='15' width='2' height='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------- 6. fact card
   <div class="tt-fact"><b class="tt-fact__num">23</b><span class="tt-fact__cap">года</span></div>
   row: <div class="tt-facts"> (1–4 cards) */
.tt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin: 20px 0; }
.tt-fact {
  --c: var(--tt-pink); --L: calc(var(--tt-px) * 6); --t: var(--tt-px);
  position: relative; box-sizing: border-box; padding: 20px 12px 16px; text-align: center; color: var(--c);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / var(--L) var(--t) no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / var(--t) var(--L) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / var(--L) var(--t) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / var(--t) var(--L) no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / var(--L) var(--t) no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / var(--t) var(--L) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / var(--L) var(--t) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / var(--t) var(--L) no-repeat,
    var(--tt-plate);
}
.tt-fact__num { display: block; font: 400 24px/1 var(--tt-pixel); color: var(--tt-ink); text-shadow: 2px 2px 0 color-mix(in srgb, var(--c) 55%, transparent); }
.tt-fact__cap { display: block; margin-top: 12px; font: 8px/1.8 var(--tt-pixel); color: var(--tt-muted); letter-spacing: .08em; text-transform: uppercase; }
.tt-fact--red { --c: var(--tt-red); }

/* ---------------------------------------------------------------- 7. progress bar (width = --p; fill snaps to whole segments)
   <div class="tt-progress" style="--p:72%"><div class="tt-progress__head"><span>ГОЛОСА</span><b>72%</b></div><div class="tt-progress__bar"><i></i></div></div> */
.tt-progress { --p: 50%; --c: var(--tt-pink); --seg: calc(var(--tt-px) * 3); margin: 16px 0; }
.tt-progress__head { display: flex; justify-content: space-between; margin-bottom: 10px; font: 8px/1 var(--tt-pixel); letter-spacing: .08em; color: var(--tt-muted); text-transform: uppercase; }
.tt-progress__head b { font-weight: 400; color: var(--tt-ink); }
.tt-progress__bar {
  position: relative; box-sizing: border-box; margin: var(--tt-px); height: calc(var(--tt-px) * 9);
  padding: calc(var(--tt-px) * 2); background: var(--tt-plate);
  box-shadow: 0 calc(var(--tt-px) * -1) 0 0 color-mix(in srgb, var(--c) 55%, transparent), 0 var(--tt-px) 0 0 color-mix(in srgb, var(--c) 55%, transparent), calc(var(--tt-px) * -1) 0 0 0 color-mix(in srgb, var(--c) 55%, transparent), var(--tt-px) 0 0 0 color-mix(in srgb, var(--c) 55%, transparent);
}
.tt-progress__bar i {
  display: block; height: 100%; width: var(--p); background: var(--c); image-rendering: pixelated;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 5' width='6' height='10' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EProgress segment tile 3x5%3C/title%3E%3Crect x='0' y='0' width='2' height='5'/%3E%3C/svg%3E") 0 0 / var(--seg) 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 5' width='6' height='10' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EProgress segment tile 3x5%3C/title%3E%3Crect x='0' y='0' width='2' height='5'/%3E%3C/svg%3E") 0 0 / var(--seg) 100% repeat-x;
}
@supports (width: round(nearest, 50%, 6px)) {
  .tt-progress__bar i { width: round(nearest, var(--p), var(--seg)); }
}
.tt-progress--red { --c: var(--tt-red); }

/* ---------------------------------------------------------------- 8. spoiler (details/summary, no JS)
   <details class="tt-spoiler"><summary><span class="c">НАЖМИ, ЧТОБЫ ОТКРЫТЬ</span><span class="o">СКРЫТЬ</span></summary><div class="tt-spoiler__body">…</div></details> */
.tt-spoiler { margin: 20px 0; }
.tt-spoiler > summary {
  display: inline-flex; align-items: center; gap: 12px; margin: var(--tt-px); padding: 5px 14px 5px 8px;
  min-height: 16px; list-style: none; cursor: pointer; user-select: none;
  font: 8px/8px var(--tt-pixel); letter-spacing: .04em; color: var(--tt-ink); text-transform: uppercase;
  background: var(--tt-plate); box-shadow: 0 calc(var(--tt-px) * -1) 0 0 var(--tt-pink), 0 var(--tt-px) 0 0 var(--tt-pink), calc(var(--tt-px) * -1) 0 0 0 var(--tt-pink), var(--tt-px) 0 0 0 var(--tt-pink);
  transition: background-color .15s;
}
.tt-spoiler > summary::-webkit-details-marker { display: none; }
.tt-spoiler > summary::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--tt-pink); image-rendering: pixelated;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ELock%3C/title%3E%3Crect x='5' y='1' width='6' height='1'/%3E%3Crect x='4' y='2' width='8' height='1'/%3E%3Crect x='3' y='3' width='3' height='1'/%3E%3Crect x='10' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='2' height='3'/%3E%3Crect x='11' y='4' width='2' height='3'/%3E%3Crect x='1' y='7' width='14' height='3'/%3E%3Crect x='1' y='10' width='5' height='1'/%3E%3Crect x='10' y='10' width='5' height='1'/%3E%3Crect x='1' y='11' width='6' height='2'/%3E%3Crect x='9' y='11' width='6' height='2'/%3E%3Crect x='1' y='13' width='14' height='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ELock%3C/title%3E%3Crect x='5' y='1' width='6' height='1'/%3E%3Crect x='4' y='2' width='8' height='1'/%3E%3Crect x='3' y='3' width='3' height='1'/%3E%3Crect x='10' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='2' height='3'/%3E%3Crect x='11' y='4' width='2' height='3'/%3E%3Crect x='1' y='7' width='14' height='3'/%3E%3Crect x='1' y='10' width='5' height='1'/%3E%3Crect x='10' y='10' width='5' height='1'/%3E%3Crect x='1' y='11' width='6' height='2'/%3E%3Crect x='9' y='11' width='6' height='2'/%3E%3Crect x='1' y='13' width='14' height='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tt-spoiler[open] > summary::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EEye%3C/title%3E%3Crect x='5' y='3' width='6' height='1'/%3E%3Crect x='3' y='4' width='10' height='1'/%3E%3Crect x='2' y='5' width='4' height='1'/%3E%3Crect x='10' y='5' width='4' height='1'/%3E%3Crect x='1' y='6' width='3' height='1'/%3E%3Crect x='6' y='6' width='4' height='1'/%3E%3Crect x='12' y='6' width='3' height='1'/%3E%3Crect x='0' y='7' width='3' height='1'/%3E%3Crect x='5' y='7' width='6' height='1'/%3E%3Crect x='13' y='7' width='3' height='1'/%3E%3Crect x='1' y='8' width='3' height='1'/%3E%3Crect x='6' y='8' width='4' height='1'/%3E%3Crect x='12' y='8' width='3' height='1'/%3E%3Crect x='2' y='9' width='4' height='1'/%3E%3Crect x='10' y='9' width='4' height='1'/%3E%3Crect x='3' y='10' width='10' height='1'/%3E%3Crect x='5' y='11' width='6' height='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3EEye%3C/title%3E%3Crect x='5' y='3' width='6' height='1'/%3E%3Crect x='3' y='4' width='10' height='1'/%3E%3Crect x='2' y='5' width='4' height='1'/%3E%3Crect x='10' y='5' width='4' height='1'/%3E%3Crect x='1' y='6' width='3' height='1'/%3E%3Crect x='6' y='6' width='4' height='1'/%3E%3Crect x='12' y='6' width='3' height='1'/%3E%3Crect x='0' y='7' width='3' height='1'/%3E%3Crect x='5' y='7' width='6' height='1'/%3E%3Crect x='13' y='7' width='3' height='1'/%3E%3Crect x='1' y='8' width='3' height='1'/%3E%3Crect x='6' y='8' width='4' height='1'/%3E%3Crect x='12' y='8' width='3' height='1'/%3E%3Crect x='2' y='9' width='4' height='1'/%3E%3Crect x='10' y='9' width='4' height='1'/%3E%3Crect x='3' y='10' width='10' height='1'/%3E%3Crect x='5' y='11' width='6' height='1'/%3E%3C/svg%3E"); }
.tt-spoiler > summary:hover { background: color-mix(in srgb, var(--tt-pink) 12%, var(--tt-plate)); }
.tt-spoiler > summary:focus-visible { outline: 2px dashed var(--tt-pink); outline-offset: 5px; }
.tt-spoiler > summary .o { display: none; }
.tt-spoiler[open] > summary .o { display: inline; }
.tt-spoiler[open] > summary .c { display: none; }
.tt-spoiler__body { margin: 14px 2px 0; padding: 4px 0 4px 16px; border-left: 2px dotted color-mix(in srgb, var(--tt-pink) 55%, transparent); font: 16px/1.5 var(--tt-serif); color: var(--tt-ink); }
.tt-spoiler__body > :first-child { margin-top: 0; } .tt-spoiler__body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- 9. kicker plate (left notch) — label above headings */
.tt-kicker {
  --kbg: var(--tt-plate);
  position: relative; isolation: isolate; display: inline-block; box-sizing: border-box; vertical-align: middle;
  padding: 8px 12px 8px 20px; height: calc(var(--tt-px) * 12); white-space: nowrap;
  font: 8px/8px var(--tt-pixel); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tt-pink); background: currentColor; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tt-px) * 0), 0 calc(100% - var(--tt-px) * 0), 0 calc(100% - var(--tt-px) * 1), 0 calc(100% - var(--tt-px) * 2), 0 calc(100% - var(--tt-px) * 3), calc(var(--tt-px) * 1) calc(100% - var(--tt-px) * 3), calc(var(--tt-px) * 1) calc(100% - var(--tt-px) * 4), calc(var(--tt-px) * 2) calc(100% - var(--tt-px) * 4), calc(var(--tt-px) * 2) calc(100% - var(--tt-px) * 5), calc(var(--tt-px) * 3) calc(100% - var(--tt-px) * 5), calc(var(--tt-px) * 3) calc(var(--tt-px) * 6), calc(var(--tt-px) * 3) calc(var(--tt-px) * 5), calc(var(--tt-px) * 2) calc(var(--tt-px) * 5), calc(var(--tt-px) * 2) calc(var(--tt-px) * 4), calc(var(--tt-px) * 1) calc(var(--tt-px) * 4), calc(var(--tt-px) * 1) calc(var(--tt-px) * 3), 0 calc(var(--tt-px) * 3), 0 calc(var(--tt-px) * 2), 0 calc(var(--tt-px) * 1), 0 0);
}
.tt-kicker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kbg); clip-path: polygon(calc(var(--tt-px) * 1) calc(var(--tt-px) * 1), calc(100% - var(--tt-px) * 1) calc(var(--tt-px) * 1), calc(100% - var(--tt-px) * 1) calc(100% - var(--tt-px) * 1), calc(var(--tt-px) * 1) calc(100% - var(--tt-px) * 1), calc(var(--tt-px) * 1) calc(100% - var(--tt-px) * 2), calc(var(--tt-px) * 1) calc(100% - var(--tt-px) * 3), calc(var(--tt-px) * 2) calc(100% - var(--tt-px) * 3), calc(var(--tt-px) * 2) calc(100% - var(--tt-px) * 4), calc(var(--tt-px) * 3) calc(100% - var(--tt-px) * 4), calc(var(--tt-px) * 3) calc(100% - var(--tt-px) * 5), calc(var(--tt-px) * 4) calc(100% - var(--tt-px) * 5), calc(var(--tt-px) * 4) calc(var(--tt-px) * 6), calc(var(--tt-px) * 4) calc(var(--tt-px) * 5), calc(var(--tt-px) * 3) calc(var(--tt-px) * 5), calc(var(--tt-px) * 3) calc(var(--tt-px) * 4), calc(var(--tt-px) * 2) calc(var(--tt-px) * 4), calc(var(--tt-px) * 2) calc(var(--tt-px) * 3), calc(var(--tt-px) * 1) calc(var(--tt-px) * 3), calc(var(--tt-px) * 1) calc(var(--tt-px) * 2), calc(var(--tt-px) * 1) calc(var(--tt-px) * 1)); }
.tt-kicker--red { color: var(--tt-red); }
.tt-kicker--solid { --kbg: currentColor; color: var(--tt-pink); }
.tt-kicker--solid > span { color: var(--tt-bg); }

/* ---------------------------------------------------------------- 10. polaroid stack
   <div class="tt-polaroids"><figure class="tt-polaroid"><i class="tt-tape"></i><img src alt><figcaption>…</figcaption></figure>…</div>
   Wrap img in <a data-tt-lightbox="group"> to hook the site's lightbox. 2–4 photos. */
.tt-polaroids { --w: clamp(104px, 27vw, 188px); display: flex; justify-content: center; padding: 28px 0 24px; }
.tt-polaroid {
  position: relative; box-sizing: border-box; flex: none; width: var(--w); margin: 0 0 0 calc(var(--w) * -.14);
  padding: 8px 8px 28px; background: #D8CDD2; color: var(--tt-panel-2);
  box-shadow: calc(var(--tt-px) * 2) calc(var(--tt-px) * 2) 0 0 color-mix(in srgb, var(--tt-pink) 28%, transparent), 0 10px 22px rgba(0, 0, 0, .55);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); transition: transform .2s ease;
}
.tt-polaroid:first-child { margin-left: 0; }
.tt-polaroid:nth-child(1) { --r: -5deg; --y: 8px; }
.tt-polaroid:nth-child(2) { --r: 2.5deg; --y: -6px; z-index: 1; }
.tt-polaroid:nth-child(3) { --r: -2deg; --y: 10px; z-index: 2; }
.tt-polaroid:nth-child(4) { --r: 5deg; --y: -2px; z-index: 3; }
.tt-polaroid:hover { --r: 0deg; --y: -10px; z-index: 5; }
.tt-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tt-panel); }
.tt-polaroid figcaption {
  position: absolute; left: 8px; right: 8px; bottom: 0; height: 28px; display: flex; align-items: center; justify-content: center;
  font: 8px/1 var(--tt-pixel); letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden;
}
.tt-polaroid--dark { background: var(--tt-panel); color: var(--tt-muted); box-shadow: 0 calc(var(--tt-px) * -1) 0 0 color-mix(in srgb, var(--tt-pink) 55%, transparent), 0 var(--tt-px) 0 0 color-mix(in srgb, var(--tt-pink) 55%, transparent), calc(var(--tt-px) * -1) 0 0 0 color-mix(in srgb, var(--tt-pink) 55%, transparent), var(--tt-px) 0 0 0 color-mix(in srgb, var(--tt-pink) 55%, transparent), 0 10px 22px rgba(0, 0, 0, .55); }
.tt-tape {
  position: absolute; z-index: 3; left: 50%; top: -12px; width: 72px; height: 22px; margin-left: -36px;
  background: var(--tt-pink); transform: rotate(var(--tape-r, -4deg)); image-rendering: pixelated; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' width='80' height='24' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ETape strip%3C/title%3E%3Cg fill-opacity='0.28'%3E%3Crect x='2' y='0' width='36' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='37' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='40' height='2'/%3E%3Crect x='2' y='4' width='36' height='2'/%3E%3Crect x='0' y='6' width='40' height='2'/%3E%3Crect x='2' y='8' width='36' height='2'/%3E%3Crect x='0' y='10' width='3' height='1'/%3E%3Crect x='37' y='10' width='3' height='1'/%3E%3Crect x='0' y='11' width='40' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.55'%3E%3Crect x='3' y='1' width='34' height='1'/%3E%3Crect x='3' y='10' width='34' height='1'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' width='80' height='24' shape-rendering='crispEdges' fill='currentColor' color='%23FF3D8A'%3E%3Ctitle%3ETape strip%3C/title%3E%3Cg fill-opacity='0.28'%3E%3Crect x='2' y='0' width='36' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='37' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='40' height='2'/%3E%3Crect x='2' y='4' width='36' height='2'/%3E%3Crect x='0' y='6' width='40' height='2'/%3E%3Crect x='2' y='8' width='36' height='2'/%3E%3Crect x='0' y='10' width='3' height='1'/%3E%3Crect x='37' y='10' width='3' height='1'/%3E%3Crect x='0' y='11' width='40' height='1'/%3E%3C/g%3E%3Cg fill-opacity='0.55'%3E%3Crect x='3' y='1' width='34' height='1'/%3E%3Crect x='3' y='10' width='34' height='1'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tt-polaroid:nth-child(2) .tt-tape { --tape-r: 5deg; }
@media (prefers-reduced-motion: reduce) {
  .tt-polaroid, .tt-spoiler > summary { transition: none; }
}