.py-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 3.4vw, 52px); align-items: center; justify-items: center; }
.py-col { display: grid; gap: 12px; justify-items: center; }
.py-tag { font: 500 12px/1 var(--mono); color: #8d8f98; letter-spacing: .04em; text-transform: uppercase; }
.py-phone { width: clamp(180px, 18vw, 230px); }
.py-frame { padding: 7px; border-radius: 34px; background: linear-gradient(135deg, #f3f3f5, #a9abb1 50%, #e4e5e8); box-shadow: 0 40px 70px -30px rgba(0,0,0,.8); }
.py-screen { position: relative; aspect-ratio: 9 / 17.5; border-radius: 28px; border: 4px solid #0b0b0b; overflow: hidden; background: linear-gradient(160deg, #3a3d4a, #1b1c22); }
.py-dim { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.py-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 14px; border-radius: 20px 20px 0 0; background: #f2f2f4; color: #151515; font: 600 10.5px/1.2 var(--sans); display: grid; gap: 9px; transform: translateY(100%); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.py-screen:not([data-s="0"]) .py-sheet, .py-screen[data-s="0"].up .py-sheet { transform: none; }
.py-sh-h { display: flex; justify-content: space-between; align-items: baseline; } .py-sh-h b { font-size: 13px; } .py-sh-h span { color: #777; font-size: 9px; }
.py-row { display: flex; justify-content: space-between; gap: 8px; color: #444; font-weight: 500; }
.py-row.tot { padding-top: 7px; border-top: 1px solid #d6d6d9; color: #111; font-weight: 700; }
.py-pay { position: relative; height: 38px; border-radius: 11px; background: #000; color: #fff; display: grid; place-items: center; overflow: hidden; font: 600 13px/1 var(--sans); }
.py-lbl { grid-area: 1 / 1; transition: opacity .3s ease, transform .3s ease; opacity: 0; transform: translateY(6px); }
.py-screen[data-s="0"] .py-l0, .py-screen[data-s="1"] .py-l1, .py-screen[data-s="2"] .py-l2 { opacity: 1; transform: none; }
.py-screen[data-s="1"] .py-pay { animation: py-press .9s ease-in-out infinite alternate; }
.py-screen[data-s="2"] .py-pay { background: #1f9d55; }
@keyframes py-press { to { box-shadow: 0 0 0 4px rgba(255,255,255,.35); } }

.py-trace { position: relative; list-style: none; margin: 0; padding: 0 0 0 34px; display: grid; gap: 22px; width: min(100%, 340px); }
.py-trace::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: rgba(255,255,255,.14); }
.py-trace li { position: relative; opacity: .38; transition: opacity .4s ease; }
.py-trace li::before { content: attr(data-n); position: absolute; left: -34px; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #1b1c22; border: 1.5px solid rgba(255,255,255,.3); font: 600 11px/1 var(--mono); transition: background .35s ease, border-color .35s ease, color .35s ease; }
.py-trace li b { display: block; font: 700 15px/1.3 var(--sans); } .py-trace li span { color: #9a9ca5; font-size: 13px; }
.py-trace li.on { opacity: 1; } .py-trace li.on::before { background: #7fd6a1; border-color: #7fd6a1; color: #0b0b0b; content: "✓"; }
.py-dot { position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #e8c07a; box-shadow: 0 0 14px #e8c07a; opacity: 0; transition: top .9s cubic-bezier(.45,0,.2,1), opacity .3s ease; }
.py-dot.run { opacity: 1; }

.py-clover { width: clamp(190px, 19vw, 240px); border-radius: 16px; padding: 10px; background: linear-gradient(160deg, #2c2f38, #17181d); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); display: grid; gap: 10px; }
.py-cl-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: #1f9d55; font: 700 11px/1 var(--sans); } .py-cl-h span { font-weight: 500; opacity: .85; }
.py-paper { position: relative; min-height: 190px; padding: 12px 12px 14px; border-radius: 4px 4px 12px 12px; background: #f6f4ee; color: #1b1b1b; font: 500 10.5px/1.25 var(--mono); display: grid; align-content: start; gap: 7px; clip-path: polygon(0 0, 100% 0, 100% 100%, 96% 97%, 92% 100%, 88% 97%, 84% 100%, 80% 97%, 76% 100%, 72% 97%, 68% 100%, 64% 97%, 60% 100%, 56% 97%, 52% 100%, 48% 97%, 44% 100%, 40% 97%, 36% 100%, 32% 97%, 28% 100%, 24% 97%, 20% 100%, 16% 97%, 12% 100%, 8% 97%, 4% 100%, 0 97%); }
.py-line { display: flex; justify-content: space-between; gap: 8px; opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--d) * 150ms); }
.py-line.tot { padding-top: 6px; border-top: 1px dashed #aaa; font-weight: 700; }
.py-paper.on .py-line { opacity: 1; transform: none; }
.py-stamp { position: absolute; right: 10px; bottom: 14px; padding: 4px 9px; border: 2px solid #1f9d55; border-radius: 6px; color: #1f9d55; font: 900 15px/1 var(--display); letter-spacing: .04em; rotate: -9deg; opacity: 0; scale: 1.5; transition: opacity .25s ease .75s, scale .35s cubic-bezier(.16,1,.3,1) .75s; display: grid; text-align: center; }
.py-stamp small { font: 600 8px/1.2 var(--mono); letter-spacing: 0; }
.py-paper.on .py-stamp { opacity: 1; scale: 1; }

.py-mix { margin: 14px 0 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); }
.py-bar { display: flex; gap: 3px; height: 14px; } .py-bar i { border-radius: 4px; min-width: 4px; }
.py-bar .a, .py-mix span.a { background: #151515; } .py-bar .c, .py-mix span.c { background: var(--accent-fill); } .py-bar .g, .py-mix span.g { background: #e8a93c; color: #141414; }
.py-mix p { margin: 12px 0 0; max-width: none; font-size: 14px; color: var(--muted); }
.py-mix span { display: inline-block; margin-right: 4px; padding: 1px 9px; border-radius: 999px; color: #fff; font: 600 12px/1.6 var(--sans); }
:root[data-theme="dark"] .py-bar .a, :root[data-theme="dark"] .py-mix span.a { background: #f1f0ec; color: #111; }
.py-replay { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
@media (max-width: 900px) { .py-grid { grid-template-columns: 1fr; } .py-trace { width: 100%; max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { .py-sheet, .py-line, .py-stamp, .py-dot, .py-trace li, .py-lbl { transition: none; } .py-screen[data-s="1"] .py-pay { animation: none; } }