/* paper kit components, web edition. Each mirrors a Flutter widget in paper_kit. */

/* A themed scope: lets one card switch theme on its own (PaperInkReveal's demo). */
.pk-scope[data-theme='light'] {
    --paper: #f4ecde;
    --sheet: 251, 247, 239;
    --ink: #211e19;
    --muted: #6b6256;
    --faint: #9d9386;
    --rule: #d8cebc;
    --accent: #8e7d67;
    --primary: #322d26;
    --on-primary: #f4ecde;
    --red: #b8432f;
    --blue: #3f5d7d;
    --note: #f3e3b5;
    --texture: url('assets/handmade-paper.jpg');
    --veil: rgba(244, 236, 222, 0);
}

.pk-scope[data-theme='dark'] {
    --paper: #171512;
    --sheet: 33, 31, 27;
    --ink: #f8f3ea;
    --muted: #b9b0a2;
    --faint: #81786c;
    --rule: #4b463e;
    --accent: #c9bda7;
    --primary: #f3eadb;
    --on-primary: #171512;
    --red: #e0715c;
    --blue: #8fb0d6;
    --note: #4a4130;
    --texture: url('assets/dark-handmade-paper-1040.jpg');
    --veil: rgba(23, 21, 18, 0.38);
}

/* PaperHeading */
.pk-heading {
    color: var(--ink);
    display: inline-block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    text-transform: lowercase;
}

.pk-heading::after {
    background: var(--primary);
    bottom: -8px;
    content: '';
    height: 3px;
    left: 0;
    position: absolute;
    width: 40px;
}

.pk-heading-input {
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--rule);
    color: var(--muted);
    font: 600 0.85rem var(--sans);
    padding: 0.3rem 0.1rem;
    text-align: center;
    width: min(260px, 100%);
}

.pk-heading-input:focus {
    border-bottom-color: var(--primary);
    outline: none;
}

/* PaperThemeToggle */
.pk-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.5px;
    padding: 6px 2px;
    transition: color 0.2s ease;
}

.pk-toggle:hover {
    color: var(--ink);
}

.pk-toggle-dot {
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
    border: 2px solid currentColor;
    border-radius: 50%;
    height: 12px;
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 12px;
}

.pk-toggle.is-dark .pk-toggle-dot {
    transform: rotate(180deg);
}

/* PaperInkReveal demo: a card that switches theme by itself. */
.pk-reveal {
    border-radius: 10px;
    box-shadow: 0 18px 30px -22px rgba(var(--shadow), 0.7);
    overflow: hidden;
    position: relative;
    width: min(340px, 100%);
}

.pk-reveal-layer {
    background-color: var(--paper);
    background-image: linear-gradient(var(--veil), var(--veil)), var(--texture);
    background-size: 100% 100%, 400px auto;
    color: var(--ink);
    padding: 22px 22px 20px;
}

.pk-reveal-layer + .pk-reveal-layer {
    inset: 0;
    position: absolute;
}

.pk-reveal-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.pk-reveal-kicker {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pk-reveal-layer .pk-heading {
    font-size: 24px;
    margin-top: 14px;
}

.pk-reveal-layer p {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    margin-top: 20px;
}

/* PaperStampButton */
.pk-stamp-pad {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    position: relative;
}

.pk-stamp {
    background: rgb(var(--sheet));
    border: 2px solid currentColor;
    border-radius: 4px;
    box-shadow: 0 3px 0 rgba(var(--shadow), 0.16), 0 10px 16px -10px rgba(var(--shadow), 0.55);
    color: var(--ink);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.2px;
    outline: 1px solid currentColor;
    outline-offset: -6px;
    padding: 14px 22px;
    position: relative;
    text-transform: lowercase;
    transition: transform 90ms ease, box-shadow 90ms ease;
    -webkit-tap-highlight-color: transparent;
}

.pk-stamp:focus-visible {
    outline: 1px solid currentColor;
    box-shadow: 0 0 0 3px rgba(var(--shadow), 0.18), 0 3px 0 rgba(var(--shadow), 0.16);
}

.pk-stamp.is-pressed {
    box-shadow: 0 1px 0 rgba(var(--shadow), 0.16), 0 4px 8px -6px rgba(var(--shadow), 0.5);
    transform: translateY(2px) scale(0.97);
}

.pk-stamp--red {
    color: var(--red);
}

.pk-stamp--blue {
    color: var(--blue);
}

/* The mark a stamp leaves: rough-edged, slightly turned, fading into the paper. */
.pk-impression {
    border: 3px solid currentColor;
    border-radius: 3px;
    color: var(--red);
    filter: url(#pk-ink);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
    opacity: 0.9;
    padding: 10px 16px;
    pointer-events: none;
    position: absolute;
    text-transform: lowercase;
    white-space: nowrap;
    z-index: 3;
}

/* PaperCheckbox */
.pk-checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

.pk-check {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 12px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.pk-check input {
    height: 22px;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 22px;
}

.pk-check > svg {
    fill: none;
    flex: none;
    height: 22px;
    overflow: visible;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 22px;
}

.pk-box {
    stroke: var(--ink);
    stroke-width: 1.6;
}

.pk-tick {
    stroke: var(--blue);
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    stroke-width: 2.2;
    transition: stroke-dashoffset 160ms ease-in;
}

.pk-check input:checked + svg .pk-tick {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 260ms ease-out;
}

.pk-check input:focus-visible + svg {
    border-radius: 4px;
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.pk-check-label {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    position: relative;
    transition: color 0.3s ease;
}

.pk-strike {
    fill: none;
    height: 10px;
    left: -3px;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    stroke: var(--ink);
    stroke-dasharray: 104;
    stroke-dashoffset: 104;
    stroke-linecap: round;
    stroke-width: 1.6;
    top: calc(50% - 4px);
    transition: stroke-dashoffset 200ms ease-in;
    width: calc(100% + 6px);
}

.pk-check input:checked ~ .pk-check-label {
    color: var(--muted);
}

.pk-check input:checked ~ .pk-check-label .pk-strike {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 300ms 120ms ease-out;
}

/* PaperTextField */
.pk-field {
    display: block;
    padding-bottom: 22px;
    position: relative;
    width: min(320px, 100%);
}

.pk-field-label {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: lowercase;
}

.pk-field input {
    background: transparent;
    border: 0;
    color: var(--ink);
    font: 500 16px var(--sans);
    outline: none;
    padding: 6px 0 8px;
    width: 100%;
}

.pk-field input::placeholder {
    color: var(--faint);
}

.pk-field-rule,
.pk-field-ink,
.pk-field-wave {
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.pk-field-rule {
    background: var(--rule);
    height: 1px;
    top: calc(100% - 22px);
}

.pk-field-ink {
    background: var(--ink);
    height: 2px;
    top: calc(100% - 23px);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pk-field:focus-within .pk-field-ink {
    transform: scaleX(1);
}

/* A wavy red-pen line under a field that has an error. */
.pk-field-wave {
    background: var(--red);
    height: 4px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 2 Q2 0.5 4 2 T8 2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x 0 0 / 8px 4px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 2 Q2 0.5 4 2 T8 2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x 0 0 / 8px 4px;
    opacity: 0;
    top: calc(100% - 24px);
    transition: opacity 0.2s ease;
}

.pk-field-error {
    bottom: 0;
    color: var(--red);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: translateY(-3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pk-field.is-error .pk-field-rule,
.pk-field.is-error .pk-field-ink {
    opacity: 0;
}

.pk-field.is-error .pk-field-wave,
.pk-field.is-error .pk-field-error {
    opacity: 1;
    transform: none;
}

/* PaperIndexTabs */
.pk-tabs {
    padding-right: 30px;
    position: relative;
    width: min(360px, 100%);
}

.pk-tabs-page {
    background-color: rgb(var(--sheet));
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(var(--shadow), 0.08), 0 16px 30px -20px rgba(var(--shadow), 0.65), 6px 0 10px -8px rgba(var(--shadow), 0.4);
    min-height: 236px;
    padding: 22px 22px 20px;
    position: relative;
    z-index: 1;
}

.pk-tabs-panel[hidden] {
    display: none;
}

.pk-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    right: 0;
    top: 16px;
    z-index: 0;
}

.pk-tab {
    align-items: center;
    background: var(--tone);
    border: 0;
    border-radius: 0 8px 8px 0;
    color: var(--tab-ink);
    cursor: pointer;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    height: 76px;
    justify-content: center;
    letter-spacing: 0.06em;
    opacity: 0.8;
    position: relative;
    transform: translateX(-8px);
    transition: transform 0.28s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.28s ease;
    width: 30px;
    writing-mode: vertical-rl;
}

.pk-tab[aria-selected='true'] {
    opacity: 1;
    transform: none;
    z-index: 2;
}

.pk-tab:focus-visible {
    outline-offset: 1px;
}

.pk-tabs-panel h5 {
    font-size: 18px;
    font-weight: 800;
    text-transform: lowercase;
}

.pk-tabs-panel p {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
}

.pk-tabs-panel ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin-top: 14px;
}

.pk-tabs-panel li {
    border-bottom: 1px dashed var(--rule);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    justify-content: space-between;
    padding-bottom: 6px;
}

.pk-tabs-panel li span:last-child {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* PaperTearToConfirm */
.pk-ticket {
    display: flex;
    height: 96px;
    position: relative;
    touch-action: pan-y;
    user-select: none;
    width: min(340px, 100%);
    -webkit-user-select: none;
}

.pk-ticket-main,
.pk-ticket-stub {
    background-color: rgb(var(--sheet));
    border: 1px solid var(--rule);
    position: relative;
}

.pk-ticket-main {
    border-radius: 10px 0 0 10px;
    border-right: 0;
    display: flex;
    flex: 0 0 72%;
    flex-direction: column;
    justify-content: center;
    -webkit-mask: radial-gradient(circle 9px at 100% 0, transparent 8.5px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, transparent 8.5px, #000 9px) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle 9px at 100% 0, transparent 8.5px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, transparent 8.5px, #000 9px) bottom / 100% 51% no-repeat;
    padding: 0 18px;
}

.pk-ticket-stub {
    align-items: center;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    cursor: grab;
    display: flex;
    flex: 1;
    justify-content: center;
    -webkit-mask: radial-gradient(circle 9px at 0 0, transparent 8.5px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, transparent 8.5px, #000 9px) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle 9px at 0 0, transparent 8.5px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, transparent 8.5px, #000 9px) bottom / 100% 51% no-repeat;
    touch-action: none;
}

.pk-ticket-stub:active {
    cursor: grabbing;
}

/* The perforation, 2px dashes on the stub's edge. */
.pk-ticket-stub::before {
    background: repeating-linear-gradient(180deg, var(--faint) 0 4px, transparent 4px 8px);
    bottom: 12px;
    content: '';
    left: -1px;
    position: absolute;
    top: 12px;
    width: 2px;
}

.pk-ticket-stub span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    writing-mode: vertical-rl;
}

.pk-ticket.is-pulling .pk-ticket-stub,
.pk-ticket.is-torn .pk-ticket-stub {
    clip-path: polygon(var(--tear-left));
}

.pk-ticket.is-pulling .pk-ticket-stub::before,
.pk-ticket.is-torn .pk-ticket-stub::before {
    display: none;
}

.pk-ticket.is-pulling .pk-ticket-main,
.pk-ticket.is-torn .pk-ticket-main {
    clip-path: polygon(var(--tear-right));
}

.pk-ticket-kicker {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pk-ticket-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.pk-ticket-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

.pk-ticket .pk-impression {
    font-size: 13px;
    padding: 6px 9px;
    right: 18px;
    top: 30px;
}

/* PaperReceipt */
.pk-receipt-host {
    left: 50%;
    pointer-events: none;
    position: fixed;
    top: 74px;
    transform: translateX(-50%);
    width: 220px;
    z-index: 60;
}

.pk-receipt-host--inline {
    position: absolute;
    top: 10px;
}

.pk-receipt-slot {
    background: var(--primary);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(var(--shadow), 0.35);
    height: 6px;
    position: relative;
    z-index: 2;
}

.pk-receipt-feed {
    margin: -2px auto 0;
    overflow: hidden;
    padding: 0 8px 20px;
    width: 216px;
}

.pk-receipt {
    background: rgb(var(--sheet));
    box-shadow: 0 10px 18px -10px rgba(var(--shadow), 0.55);
    color: var(--ink);
    cursor: pointer;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    padding: 16px 16px 22px;
    pointer-events: auto;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, transparent, #000 1deg 89deg, transparent 90deg) bottom / 16px 8px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, transparent, #000 1deg 89deg, transparent 90deg) bottom / 16px 8px repeat-x;
    width: 200px;
}

.pk-receipt-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: lowercase;
}

.pk-receipt-rows {
    display: grid;
    gap: 6px;
    list-style: none;
    margin-top: 10px;
}

.pk-receipt-rows li {
    align-items: baseline;
    display: flex;
    gap: 6px;
}

.pk-receipt-rows li::after {
    border-bottom: 1.5px dotted var(--faint);
    content: '';
    flex: 1;
    order: 1;
    transform: translateY(-3px);
}

.pk-receipt-rows span:last-child {
    font-weight: 700;
    order: 2;
}

.pk-receipt-foot {
    border-top: 1px dashed var(--faint);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    margin-top: 12px;
    padding-top: 8px;
    text-align: center;
}

/* PaperPlaneButton */
.pk-plane {
    background: var(--primary);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 18px -12px rgba(var(--shadow), 0.8);
    color: var(--on-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    min-width: 110px;
    padding: 14px 26px;
    position: relative;
    text-transform: lowercase;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.pk-plane.is-flying {
    background: transparent;
    box-shadow: none;
}

.pk-plane-label {
    display: inline-block;
    transition: opacity 120ms ease;
}

.pk-plane.is-flying .pk-plane-label {
    opacity: 0;
}

.pk-plane-svg {
    left: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    top: 0;
}

.pk-plane-svg polygon {
    fill: var(--primary);
}

.pk-plane-svg line {
    stroke: var(--on-primary);
    stroke-linecap: round;
    stroke-width: 1.4;
}

/* PaperPeel */
.pk-peel {
    --size: 180px;
    height: var(--size);
    position: relative;
    touch-action: none;
    user-select: none;
    width: var(--size);
    -webkit-user-select: none;
}

.pk-peel-body {
    filter: drop-shadow(0 8px 10px rgba(var(--shadow), 0.26));
    height: 100%;
}

.pk-peel-note {
    background: var(--note);
    box-shadow: inset 0 -10px 18px -14px rgba(var(--shadow), 0.35);
    color: #3b3222;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    line-height: 1.35;
    padding: 18px;
    position: relative;
    width: 100%;
}

:root[data-theme='dark'] .pk-peel-note,
.pk-scope[data-theme='dark'] .pk-peel-note {
    color: #efe3c4;
}

.pk-peel-note small {
    font-size: 11px;
    font-weight: 600;
    margin-top: 8px;
    opacity: 0.7;
}

.pk-peel-flap {
    height: 100%;
    left: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.pk-peel-handle {
    bottom: 0;
    cursor: grab;
    height: 46%;
    position: absolute;
    right: 0;
    width: 46%;
}

.pk-peel.is-dragging .pk-peel-handle {
    cursor: grabbing;
}

/* PaperZine */
.pk-zine {
    perspective: 700px;
    width: min(320px, 100%);
}

.pk-zine-head {
    align-items: center;
    background: rgb(var(--sheet));
    border: 1px solid var(--rule);
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 700;
    justify-content: space-between;
    padding: 14px 16px;
    position: relative;
    text-transform: lowercase;
    width: 100%;
    z-index: 2;
}

.pk-zine-head svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: 16px;
}

.pk-zine.is-open .pk-zine-head svg {
    transform: rotate(180deg);
}

.pk-zine-panel {
    height: 0;
    transform-style: preserve-3d;
    transition: height 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pk-zine-face {
    background: rgb(var(--sheet));
    border: 1px solid var(--rule);
    border-top: 0;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 600;
    height: var(--panel-height, 72px);
    justify-content: center;
    padding: 0 16px;
    position: relative;
    opacity: 0;
    transform: rotateX(var(--fold, -90deg));
    transform-origin: 50% 0;
    transition: transform 450ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 450ms ease-in;
}

.pk-zine-panel:nth-child(odd) .pk-zine-face {
    --fold: 90deg;
    transform-origin: 50% 100%;
}

.pk-zine-face::after {
    background: #000;
    content: '';
    inset: 0;
    opacity: 0.18;
    pointer-events: none;
    position: absolute;
    transition: opacity 450ms ease;
    transition-delay: inherit;
}

.pk-zine-face span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.pk-zine.is-open .pk-zine-panel {
    height: var(--panel-height, 72px);
}

.pk-zine.is-open .pk-zine-face {
    opacity: 1;
    transform: none;
    transition: transform 450ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 150ms ease-out;
}

.pk-zine.is-open .pk-zine-face::after {
    opacity: 0;
}

.pk-zine-panel:last-child .pk-zine-face {
    border-radius: 0 0 6px 6px;
}

/* PaperNote */
.pk-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 22px;
    justify-content: center;
    padding-top: 12px;
}

.pk-note {
    background: rgb(var(--sheet));
    box-shadow: 0 10px 20px -12px rgba(var(--shadow), 0.6), 0 1px 1px rgba(var(--shadow), 0.08);
    padding: 22px 16px 16px;
    position: relative;
    transform: rotate(var(--rot, -1.5deg));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 150px;
}

.pk-note:hover,
.pk-note:focus-within {
    box-shadow: 0 16px 26px -14px rgba(var(--shadow), 0.65), 0 1px 1px rgba(var(--shadow), 0.08);
    transform: translateY(-4px) rotate(0deg);
}

.pk-note h5 {
    font-size: 14px;
    font-weight: 800;
    text-transform: lowercase;
}

.pk-note p {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 6px;
}

.pk-tape {
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.2) 6px 9px), var(--tape-color, var(--tape));
    height: 20px;
    left: 50%;
    position: absolute;
    top: -10px;
    transform: translateX(-50%) rotate(-4deg);
    width: 64px;
    -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
    mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
}

/* PaperRuler */
.pk-ruler {
    padding-top: 40px;
    position: relative;
    touch-action: none;
    user-select: none;
    width: min(360px, 100%);
    -webkit-user-select: none;
}

.pk-ruler-strip {
    background: rgb(var(--sheet));
    border: 1px solid var(--rule);
    border-radius: 3px;
    box-shadow: 0 8px 14px -10px rgba(var(--shadow), 0.55);
    cursor: pointer;
    height: 44px;
    position: relative;
}

.pk-ruler-strip svg {
    height: 100%;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    width: 100%;
}

.pk-ruler-strip line {
    stroke: var(--ink);
    stroke-width: 1;
}

.pk-ruler-strip text {
    fill: var(--muted);
    font: 500 10px var(--sans);
    text-anchor: middle;
}

.pk-ruler-thumb {
    bottom: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(var(--x, 0px));
    width: 0;
}

.pk-ruler-caret {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid var(--ink);
    left: -5px;
    position: absolute;
    top: 26px;
}

.pk-ruler-thumb.is-pop .pk-ruler-caret,
.pk-ruler-thumb.is-pop .pk-ruler-value {
    animation: pk-pop 160ms ease-out;
}

.pk-ruler-hair {
    background: var(--ink);
    bottom: 0;
    left: -0.5px;
    position: absolute;
    top: 36px;
    width: 1px;
}

.pk-ruler-value {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.pk-ruler:focus-visible {
    outline: none;
}

.pk-ruler:focus-visible .pk-ruler-strip {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

@keyframes pk-pop {
    50% {
        scale: 1.15;
    }
}

/* PaperBackground demo */
.pk-swatch-pair {
    border-radius: 8px;
    box-shadow: 0 18px 30px -22px rgba(var(--shadow), 0.7);
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 220px;
    overflow: hidden;
    width: min(380px, 100%);
}

.pk-swatch-half {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}

.pk-swatch-half span {
    background: rgba(var(--sheet), 0.9);
    border-radius: 999px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    width: max-content;
}

.pk-swatch-grain {
    background-color: var(--paper);
    background-size: 256px 256px;
}

.pk-swatch-texture {
    background-color: var(--paper);
    background-image: linear-gradient(var(--veil), var(--veil)), var(--texture);
    background-size: 100% 100%, 400px auto;
}

.pk-segmented {
    border: 1px solid var(--rule);
    border-radius: 999px;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
}

.pk-segmented button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
}

.pk-segmented button[aria-pressed='true'] {
    background: var(--primary);
    color: var(--on-primary);
}

/* PaperEnvelope */
.pk-envelope {
    --w: 320px;
    --h: calc(var(--w) * 0.62);
    --rise: calc(var(--h) * 0.72);
    --flap: calc(var(--h) * 0.56);
    cursor: pointer;
    height: calc(var(--h) + var(--rise));
    perspective: 700px;
    position: relative;
    user-select: none;
    width: var(--w);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

.pk-env-back,
.pk-env-pocket {
    bottom: 0;
    height: var(--h);
    left: 0;
    position: absolute;
    right: 0;
}

.pk-env-back {
    background: color-mix(in srgb, rgb(var(--sheet)) 84%, var(--accent));
    border-radius: 3px;
    box-shadow: 0 14px 24px -10px rgba(var(--shadow), 0.4);
    z-index: 0;
}

.pk-env-letter {
    background: rgb(var(--sheet));
    border-radius: 2px;
    bottom: calc(var(--h) * 0.06);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
    font-size: 14px;
    height: calc(var(--h) * 0.9);
    left: 6%;
    line-height: 1.5;
    overflow: hidden;
    padding: 16px 18px 12px;
    position: absolute;
    right: 6%;
    transition: transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 600ms ease;
    z-index: 2;
}

.pk-env-letter p + p {
    margin-top: 0.5em;
}

.pk-envelope.is-open .pk-env-letter {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    transform: translateY(calc(var(--rise) * -1));
    transition: transform 820ms cubic-bezier(0.215, 0.61, 0.355, 1) 640ms, box-shadow 820ms ease 640ms;
}

.pk-env-pocket {
    z-index: 3;
}

.pk-env-pocket svg {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.pk-env-pocket .paper {
    fill: rgb(var(--sheet));
}

.pk-env-pocket .crease {
    fill: none;
    stroke: rgba(var(--shadow), 0.12);
    stroke-width: 1.2;
}

.pk-env-to {
    bottom: 22%;
    color: var(--blue);
    font-size: 15px;
    font-weight: 600;
    position: absolute;
    right: 18%;
}

.pk-env-flap {
    height: var(--flap);
    left: 0;
    position: absolute;
    right: 0;
    top: var(--rise);
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    transition: transform 640ms cubic-bezier(0.645, 0.045, 0.355, 1) 560ms;
    z-index: 4;
}

.pk-envelope.is-open .pk-env-flap {
    transform: rotateX(180deg);
    transition-delay: 120ms;
}

.pk-envelope.flap-behind .pk-env-flap {
    z-index: 1;
}

.pk-env-flap span {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    inset: 0;
    position: absolute;
}

.pk-env-flap .out {
    background: color-mix(in srgb, rgb(var(--sheet)) 94%, var(--accent));
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* The inside of the flap has a printed liner, as good envelopes do. */
.pk-env-flap .in {
    background: repeating-linear-gradient(45deg, rgba(var(--shadow), 0.13) 0 1px, transparent 1px 7px), color-mix(in srgb, rgb(var(--sheet)) 70%, var(--accent));
    transform: rotateX(180deg);
}

.pk-env-seal {
    --wax: #8e2a1e;
    --wax-dark: #651e15;
    --wax-light: #a85547;
    height: calc(var(--w) * 0.16);
    left: calc(50% - var(--w) * 0.08);
    pointer-events: none;
    position: absolute;
    top: calc(var(--rise) + var(--flap) - var(--w) * 0.08);
    width: calc(var(--w) * 0.16);
    z-index: 5;
}

.pk-env-seal svg {
    filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.35));
    height: 100%;
    inset: 0;
    position: absolute;
    transition: transform 260ms cubic-bezier(0.4, 0, 1, 1), opacity 260ms ease;
    width: 100%;
}

.pk-env-seal .l {
    clip-path: polygon(0 0, 50% 0, 47% 35%, 53% 58%, 50% 100%, 0 100%);
}

.pk-env-seal .r {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 53% 58%, 47% 35%);
}

.pk-envelope.is-cracked .pk-env-seal .l {
    opacity: 0;
    transform: translate(-6px, 10px) rotate(-28deg);
}

.pk-envelope.is-cracked .pk-env-seal .r {
    opacity: 0;
    transform: translate(6px, 10px) rotate(28deg);
}

:root[data-theme='dark'] .pk-env-seal {
    --wax: #b4402f;
    --wax-dark: #812e22;
    --wax-light: #c46a5c;
}

/* PaperShredder */
.pk-shredder {
    position: relative;
}

.pk-shred-page {
    position: relative;
}

.pk-shred-copy {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
}

.pk-shred-slot {
    background: var(--primary);
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    height: 10px;
    left: -8px;
    margin-top: 0;
    position: absolute;
    right: -8px;
    z-index: 2;
}

.pk-shred-slot::after {
    background: repeating-linear-gradient(90deg, transparent 0 4px, color-mix(in srgb, var(--primary) 70%, #fff) 4px 5px);
    content: '';
    height: 3px;
    left: 6px;
    position: absolute;
    right: 4px;
    top: 4px;
}

/* PaperTypewriter */
.pk-type-sheet {
    background: rgb(var(--sheet));
    box-shadow: 0 1px 1px rgba(var(--shadow), 0.08), 0 14px 26px -18px rgba(var(--shadow), 0.65);
    min-height: 150px;
    padding: 22px 24px;
    width: min(360px, 100%);
}

.pk-typewriter {
    color: var(--ink);
    font: 400 16px/1.7 'Courier Prime', 'Courier New', Courier, monospace;
    white-space: pre-wrap;
}

.pk-typewriter .w {
    white-space: nowrap;
}

.pk-typewriter .k {
    display: inline-block;
    white-space: pre;
}

.pk-typewriter .k.twice {
    text-shadow: 0.7px 0.3px 0 color-mix(in srgb, var(--ink) 35%, transparent);
}

.pk-type-caret {
    animation: pk-caret 1s steps(1) infinite;
    color: var(--red);
}

@keyframes pk-caret {
    50% {
        opacity: 0;
    }
}

/* PaperFlipPad */
.pk-flippad {
    --pw: 280px;
    --ph: 190px;
    cursor: pointer;
    height: calc(var(--ph) + 22px);
    perspective: 900px;
    position: relative;
    touch-action: pan-x;
    user-select: none;
    width: var(--pw);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

.pk-flip-board {
    background: color-mix(in srgb, var(--accent) 65%, var(--ink));
    border-radius: 3px;
    box-shadow: 0 10px 18px -8px rgba(var(--shadow), 0.55);
    height: calc(var(--ph) + 4px);
    left: 0;
    position: absolute;
    top: 22px;
    width: var(--pw);
}

.pk-flip-page {
    height: var(--ph);
    left: 0;
    position: absolute;
    top: 22px;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: var(--pw);
}

.pk-flip-page[hidden] {
    display: none;
}

.pk-flip-page.is-turning {
    transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.pk-flip-page.is-over {
    transform: rotateX(180deg);
}

.pk-flip-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: rgb(var(--sheet));
    border-radius: 0 0 3px 3px;
    inset: 0;
    overflow: hidden;
    padding: 22px 20px 14px;
    position: absolute;
}

.pk-flip-face h5 {
    font-size: 18px;
    font-weight: 800;
    text-transform: lowercase;
}

.pk-flip-face p {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

.pk-flip-face small {
    bottom: 12px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    right: 16px;
}

/* The page's back: plain ruled paper, a touch greyer. */
.pk-flip-back {
    background: repeating-linear-gradient(180deg, transparent 0 19px, color-mix(in srgb, var(--rule) 60%, transparent) 19px 20px) 0 10px, color-mix(in srgb, rgb(var(--sheet)) 60%, var(--paper));
    transform: rotateX(180deg);
}

/* Darker while the page is edge-on to the light. */
.pk-flip-page.is-turning .pk-flip-face::after {
    animation: pk-flip-shade 700ms ease-in-out;
    background: #000;
    content: '';
    inset: 0;
    opacity: 0;
    position: absolute;
}

@keyframes pk-flip-shade {
    50% {
        opacity: 0.16;
    }
}

/* The turning page's shadow sweeping down the page beneath. */
.pk-flip-page.is-under::after {
    animation: pk-flip-sweep 700ms ease-in-out;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 60%);
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

@keyframes pk-flip-sweep {
    40% {
        opacity: 1;
    }
}

.pk-flip-binding {
    height: 32px;
    left: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 50;
}

.pk-flip-binding .hole {
    fill: #3a342c;
}

.pk-flip-binding .wire {
    fill: none;
    stroke: #6e6a64;
    stroke-linecap: round;
    stroke-width: 2.2;
}

.pk-flip-binding .shine {
    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 0.8;
}

:root[data-theme='dark'] .pk-flip-binding .wire {
    stroke: #b9b4ac;
}

:root[data-theme='dark'] .pk-flip-binding .hole {
    fill: #0e0d0b;
}

/* PaperHighlightSwitch */
.pk-highlights {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pk-highlight {
    --marker: #f2cf3a;
    background: none;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    padding: 6px 4px;
    position: relative;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.pk-highlight--pink {
    --marker: #f08aa6;
}

.pk-highlight--green {
    --marker: #8fd68a;
}

.pk-hl-ink {
    background:
        linear-gradient(180deg, transparent 36%, rgba(255, 255, 255, 0.28) 36% 40%, transparent 40% 62%, rgba(255, 255, 255, 0.22) 62% 65%, transparent 65%),
        color-mix(in srgb, var(--marker) 66%, transparent);
    bottom: 3px;
    clip-path: polygon(var(--shape));
    left: -2px;
    mix-blend-mode: multiply;
    pointer-events: none;
    position: absolute;
    right: -4px;
    top: 34%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease-in;
}

:root[data-theme='dark'] .pk-hl-ink {
    background: color-mix(in srgb, var(--marker) 38%, transparent);
    mix-blend-mode: normal;
}

.pk-highlight[aria-checked='true'] .pk-hl-ink {
    transform: scaleX(1);
    transition: transform 300ms ease-out;
}

.pk-hl-label {
    position: relative;
}

/* PaperRedact */
.pk-memo {
    background: rgb(var(--sheet));
    position: relative;
    box-shadow: 0 1px 1px rgba(var(--shadow), 0.08), 0 14px 26px -18px rgba(var(--shadow), 0.65);
    font-size: 15px;
    line-height: 1.75;
    padding: 22px 24px;
    width: min(360px, 100%);
}

.pk-memo-head {
    border-bottom: 1px solid var(--rule);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.pk-redact {
    cursor: pointer;
    position: relative;
}

.pk-redact-bar {
    background: #16130f;
    clip-path: polygon(var(--shape));
    pointer-events: none;
    position: absolute;
    transform-origin: left;
    transition: transform 220ms ease-out;
}

:root[data-theme='dark'] .pk-redact-bar {
    background: #050505;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* PaperPunchCard */
.pk-punch {
    border-radius: 10px;
    box-shadow: 0 10px 18px -10px rgba(var(--shadow), 0.4);
    cursor: pointer;
    position: relative;
    user-select: none;
    width: 300px;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

.pk-punch svg.card {
    display: block;
    /* Only a lip of shadow inside each hole, where the card's edge sits above the page. */
    filter: drop-shadow(0 1.5px 0.8px rgba(var(--shadow), 0.28));
    overflow: visible;
}

.pk-punch-top {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    left: 18px;
    position: absolute;
    right: 18px;
    top: 16px;
}

.pk-punch-top b {
    font-size: 15px;
    font-weight: 800;
}

.pk-punch-top span {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.pk-chad {
    background: rgb(var(--sheet));
    border: 1px solid var(--rule);
    border-radius: 50%;
    height: 22px;
    pointer-events: none;
    position: absolute;
    width: 22px;
}

.pk-punch .pk-impression {
    font-size: 14px;
    padding: 6px 10px;
    right: 14px;
    top: 34px;
}

/* PaperClip */
.pk-clipset {
    cursor: pointer;
    margin-top: 26px;
    position: relative;
    width: 280px;
    -webkit-tap-highlight-color: transparent;
}

.pk-clip-card {
    background: rgb(var(--sheet));
    box-shadow: 0 10px 20px -12px rgba(var(--shadow), 0.6), 0 1px 1px rgba(var(--shadow), 0.08);
    height: 170px;
    padding: 20px 20px 16px 120px;
    position: relative;
}

.pk-clip-card h5 {
    font-size: 15px;
    font-weight: 800;
    text-transform: lowercase;
}

.pk-clip-card p {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
}

.pk-clip-slip {
    background: rgb(var(--sheet));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    left: 14px;
    padding: 12px 12px 14px;
    position: absolute;
    top: -12px;
    transform: rotate(-2.6deg);
    transition: transform 520ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 520ms ease;
    width: 92px;
}

.pk-clip-slip b {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pk-clip-slip span {
    display: block;
    font-size: 18px;
    font-weight: 800;
    margin-top: 4px;
}

.pk-clipset.is-off .pk-clip-slip {
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.22);
    transform: translate(-18px, 108px) rotate(-8deg);
}

.pk-clip-wire {
    height: 74px;
    left: 26px;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    top: -26px;
    transform-origin: 50% 100%;
    transition: transform 520ms cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 22px;
}

.pk-clipset.is-off .pk-clip-wire {
    transform: translateY(-6px) rotate(-12.6deg);
}

.pk-clip-wire .metal {
    fill: none;
    stroke: url(#pk-wire);
    stroke-linecap: round;
    stroke-width: 2.4;
}

.pk-clip-wire .shine {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 0.7;
}

.pk-clip-wire .shade {
    fill: none;
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 2.4;
}

/* PaperCutRule */
.pk-cut {
    width: min(340px, 100%);
}

.pk-cut-line {
    cursor: grab;
    height: 34px;
    position: relative;
    touch-action: pan-y;
}

.pk-cut-line svg {
    height: 100%;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    width: 100%;
}

.pk-cut-line .dash {
    stroke: var(--muted);
    stroke-dasharray: 5 4;
    stroke-width: 1.4;
}

.pk-cut-line .gap {
    fill: none;
    stroke: color-mix(in srgb, var(--muted) 50%, transparent);
    stroke-width: 0.8;
}

.pk-cut-line .label {
    fill: var(--faint);
    font: 700 10px var(--sans);
    letter-spacing: 1.4px;
    text-anchor: end;
}

.pk-scissors {
    color: var(--ink);
}

.pk-scissors .blade {
    transform-box: view-box;
    transition: transform 90ms linear;
}

.pk-cut-coupon {
    background: rgb(var(--sheet));
    border-radius: 2px;
    box-shadow: 0 10px 18px -12px rgba(var(--shadow), 0.6);
    padding: 18px 20px;
    transform-origin: 0 0;
}

.pk-cut-coupon b {
    display: block;
    font-size: 22px;
    font-weight: 800;
}

.pk-cut-coupon span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

/* PaperHaptics, drawn on a strip of graph paper */
.pk-seismo {
    width: min(380px, 100%);
}

.pk-seismo canvas {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--red) 14%, transparent) 1px, transparent 1px) 0 0 / 12px 12px,
        linear-gradient(180deg, color-mix(in srgb, var(--red) 14%, transparent) 1px, transparent 1px) 0 0 / 12px 12px,
        rgb(var(--sheet));
    border-radius: 3px;
    box-shadow: 0 10px 18px -12px rgba(var(--shadow), 0.6);
    display: block;
    height: 120px;
    width: 100%;
}

.pk-seismo-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
}

.pk-seismo-keys button {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 11px;
}

.pk-seismo-keys button:hover,
.pk-seismo-keys button:focus-visible {
    border-color: var(--primary);
    color: var(--ink);
}