.print-demo{background:#081c29!important;border:1px solid var(--line);border-radius:var(--r-kart);overflow:hidden;color:#e8f2f6;min-width:0;isolation:isolate}
.pd-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:20px 22px;border-bottom:1px solid #294553}.pd-heading span{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#5ee0d2}.pd-heading small{font-size:11px;color:#94adbb}
.pd-controls{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px}.pd-controls button{border:1px solid #365768;border-radius:8px;background:#102c3c;color:#dcebf2;font:600 12px/1.3 inherit;font-family:inherit;font-size:12px;padding:10px 12px;min-height:44px;cursor:pointer;transition:background .2s}.pd-controls button[aria-pressed=true]{background:#16534f;border-color:#52d7c6;color:#c5fff3}.pd-controls button:hover{background:#204759}.pd-controls button:focus-visible{outline:2px solid #77eadc;outline-offset:3px}.pd-controls button[data-action=replay]{margin-left:auto}
.pd-caption{font-size:13px!important;line-height:1.65!important;color:#a7c1d0!important;margin:0!important;padding:0 22px 20px!important;text-align:left}.pd-layout,.pd-binding{position:relative;height:360px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#17485655,transparent 70%);overflow:hidden}
.pd-paper{position:relative;width:208px;height:288px;background:#dce9ea;border-radius:2px;padding:23px 22px 27px;box-shadow:12px 20px 26px #0006;transition:background .7s,box-shadow .7s;transform:rotate(-5deg)}.pd-grid{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);gap:9px}.pd-card{position:relative;background:linear-gradient(135deg,#087c7f 30%,#073043 30%,#073043 72%,#158e96 72%);color:white;padding:7px;display:flex;align-items:center;justify-content:space-between;box-shadow:1px 2px 4px #001a2633;transition:transform .85s cubic-bezier(.2,.8,.2,1),outline .3s;transition-delay:calc(var(--i)*70ms)}.pd-card span{font-size:6px;letter-spacing:1px}.pd-card b{font-size:16px;font-weight:500}.pd-card i{position:absolute;left:7px;bottom:8px;width:15px;height:2px;background:#6ae6d4}.pd-layout[data-state=before] .pd-paper{background:transparent;box-shadow:none}.pd-layout[data-state=before] .pd-card{transform:translate(calc(var(--dx)*35px),calc(var(--dy)*7px)) rotate(calc(var(--dx)*12deg));outline:none!important}.pd-sheet-label{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:8px;color:#36565d}.pd-layout[data-state=before] .pd-sheet-label{visibility:hidden}
.pd-marks{position:absolute;inset:16px;opacity:0;transition:opacity .5s}.show-marks .pd-marks{opacity:1}.show-marks .pd-card{outline:2px solid #e3569377;outline-offset:3px}.pd-marks i{position:absolute;width:12px;height:12px;border-color:#163943;border-style:solid;border-width:0}.pd-marks .tl{left:0;top:0;border-top-width:1px;border-left-width:1px}.pd-marks .tr{right:0;top:0;border-top-width:1px;border-right-width:1px}.pd-marks .bl{left:0;bottom:0;border-bottom-width:1px;border-left-width:1px}.pd-marks .br{right:0;bottom:0;border-bottom-width:1px;border-right-width:1px}.pd-stage-tag{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;font-size:11px;color:#9db9c6;letter-spacing:.5px}
.pd-tabs{padding-bottom:0}
.pd-data{margin-top:24px}.pd-record{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;background:linear-gradient(120deg,#0d3747,#08202e)}.pd-record-copy{min-width:0;display:grid;gap:10px}.pd-record-copy small{font-size:11px;color:#71d8cd;letter-spacing:2px}.pd-record-copy strong{font-size:38px;line-height:1.1;color:#f1fcff}.pd-record-note{font-size:11px;color:#a8c4d2}.pd-record-codes{display:grid;justify-items:center;gap:6px;background:white;border-radius:8px;padding:9px;flex-shrink:0}.pd-record-codes img{object-fit:contain;display:block;max-width:100%}.pd-qr{width:72px;height:72px}.pd-ean{width:100px;height:32px}
@media(max-width:560px){.pd-heading{padding:16px}.pd-controls{padding:12px;gap:6px}.pd-controls button{font-size:11px;padding:9px}.pd-layout{height:330px}.pd-paper{width:190px;height:263px}.pd-binding{height:300px}.pd-record{padding:16px;gap:10px}.pd-record-copy strong{font-size:32px}.pd-record-note{max-width:130px}.pd-controls button[data-action=replay]{margin-left:0}.pd-caption{padding:0 16px 16px!important}}
@media(prefers-reduced-motion:reduce){.print-demo *{transition:none!important;animation:none!important}}

.pd-binding{height:auto;min-height:260px;display:block;perspective:none;padding-bottom:28px}.bind-art{display:block;width:100%;height:auto;overflow:visible}.bind-open{transform-origin:270px 170px;transition:transform .95s ease,opacity .65s}.bind-sheet{transform:translate(calc(var(--sheet)*-5px),calc(var(--sheet)*9px));transition:transform .85s ease}.bind-finished{transform-origin:280px 185px;opacity:0;transform:translateY(12px) scale(.9);transition:opacity .6s,transform 1s cubic-bezier(.2,.8,.2,1)}.bind-perfect{display:none}.pd-binding[data-kind=perfect] .bind-perfect{display:block}.pd-binding[data-kind=perfect] .bind-booklet{display:none}.pd-binding[data-step=fold] .bind-open{transform:translateX(60px) scaleX(.08);opacity:0}.pd-binding[data-step=done] .bind-open{transform:translateX(60px) scaleX(.02);opacity:0}.pd-binding[data-step=fold] .bind-finished,.pd-binding[data-step=done] .bind-finished{opacity:1;transform:none}.bind-staples{opacity:0;transform:translateY(-45px);transition:opacity .35s,transform .65s cubic-bezier(.2,.8,.2,1)}.pd-binding[data-step=done] .bind-staples{opacity:1;transform:none}.bind-perfect .bind-front,.bind-cover-type,.bind-book-spine{transform:translate(-18px,-55px);opacity:0;transition:transform .9s ease,opacity .7s}.pd-binding[data-step=done] .bind-perfect .bind-front,.pd-binding[data-step=done] .bind-cover-type,.pd-binding[data-step=done] .bind-book-spine{transform:none;opacity:1}.bind-glue{opacity:1;transition:opacity .7s}.pd-binding[data-step=done] .bind-glue{opacity:0}.pd-binding[data-kind=perfect] .bind-sheet{transform:translate(calc(var(--sheet)*8px),calc(var(--sheet)*-16px))}.pd-binding[data-kind=perfect][data-step=fold] .bind-open{transform:scale(.75);opacity:0}.pd-binding .pd-stage-tag{font-size:12px;padding:0 12px;bottom:12px;letter-spacing:0}
@media(max-width:560px){.pd-binding{min-height:220px}.pd-binding .pd-stage-tag{font-size:11px}}

@media(prefers-reduced-motion:reduce){.print-demo *{transition:none!important;animation:none!important}}