:root {
    --text-small: 13px;
    --text-body: 14px;
    --text-lead: 16px;
    --text-title: 20px;
    --text-heading: 24px;
    --text-display: 32px;
    --ink: #f5f5f7;
    --muted: #a1a1a6;
    --nav: #b5b5ba;
    --pk-faint: #86868b;
    --accent: #0067d9;
    --accent-hover: #127cf0;
    --accent-press: #0052ae;
    --accent-rgb: 0, 103, 217;
    --accent-ink: #86beff;
    --pk-thumb: #48484a;
    --pk-raised: var(--fill);
    --pk-raised-hover: var(--tint);
    --pk-primary: var(--accent);
    --pk-primary-hover: var(--accent-hover);
    --pk-selected: var(--pk-accent-fill);
    --pk-selected-hover: rgba(var(--pk-blue-rgb), 0.24);
    --pk-edge-selected: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgba(var(--pk-blue-rgb), 0.65);
    --pk-lift: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
    --pk-t-in: 100ms;
    --pk-t-out: 250ms;
    --pk-ease-out: cubic-bezier(0, 0, 0, 1);
    --danger: #f43f5e;
    --danger-rgb: 244, 63, 94;
    --danger-soft: rgba(var(--danger-rgb), 0.12);
    --danger-fill: #ef4444;
    --danger-hover: #f45d5d;
    --danger-press: #dc2626;
    --success: #4ade80;
    --success-rgb: 74, 222, 128;
    --success-soft: rgba(var(--success-rgb), 0.12);
    --warning-rgb: 255, 229, 209;
    --warning: rgb(var(--warning-rgb));
    --warning-soft: rgba(var(--warning-rgb), 0.12);
    --bg-alt: #101012;
    --bg: #1c1c1e;
    --raised: #2c2c2e;
    --card: var(--bg);
    --fill: rgb(255 255 255 / 0.06);
    --tint: rgb(255 255 255 / 0.11);
    --line: rgb(255 255 255 / 0.2);
    --field-line: rgb(255 255 255 / 0.2);
    --scrim: rgba(0, 0, 0, 0.5);
    --page: 1060px;
    --gutter: var(--gap-xl);
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 24px;
    --gap-2xl: 32px;
    --gap-3xl: 48px;
    --pk-corners: 10;
    --radius-sm: calc(var(--pk-corners) * 1px);
    --radius: var(--radius-sm);
    --radius-xs: calc(var(--pk-corners) * 0.8px);
    --radius-2xs: calc(var(--pk-corners) * 0.6px);
    --shadow: 0 12px 36px rgb(0 0 0 / 0.28);
    --hairline: inset 0 0 0 1px rgb(255 255 255 / 0.09);
    --speed: 160ms;
    --control: 36px;
    --pk-row: 32px;
    --pk-menu-row: 26px;
    --pk-toolbar: calc(var(--control) + 2 * var(--gap-xs));
    --pk-bar: 52px;
    --pk-page: 2560px;
    --pk-stage: #141414;
    --pk-blue: #0a84ff;
    --pk-guide: #ff375f;
    --pk-blue-rgb: 10, 132, 255;
    --pk-accent-fill: rgba(10, 132, 255, 0.16);
    --pk-display-xl: clamp(36px, 5.4vw, 62px);
    --pk-selection-inset: max(var(--gap-lg), env(safe-area-inset-bottom));
    --pk-backdrop: none;
    --pk-gutter: var(--gap-2xl);
    --pk-composer-height: 0px;
}

@media (pointer: coarse) {
    :root {
        --control: 44px;
        --pk-row: 44px;
        --pk-menu-row: 44px;
    }
}

@media (max-width: 1024px) {
    :root {
        --pk-gutter: var(--gap-lg);
    }
}

@media (max-width: 480px) {
    :root {
        --gutter: var(--gap-lg);
    }
}

.status-toast {
    position: fixed;
    bottom: calc(var(--gap-xl) + env(safe-area-inset-bottom));
    left: var(--gap-xl);
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    width: max-content;
    max-width: min(30rem, calc(100vw - 2 * var(--gap-lg)));
    min-height: 48px;
    padding: 6px 6px 6px var(--gap-lg);
    border-radius: var(--radius);
    background: var(--raised);
    color: var(--ink);
    box-shadow: var(--hairline), var(--pk-lift);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--leading);
    animation: rise-in 0.24s var(--ease);
}

.status-toast-text {
    min-width: 0;
    padding: 6px 10px 6px 0;
    overflow-wrap: anywhere;
}

.status-toast > .status-toast-action,
.status-toast > .status-toast-close {
    min-height: 36px;
    border-radius: var(--radius-xs);
    background: none;
    box-shadow: none;
    transition: background-color var(--pk-t-out) var(--pk-ease-out), color var(--pk-t-out) var(--pk-ease-out);
}

.status-toast > .status-toast-action {
    flex-shrink: 0;
    padding: 0 var(--gap-md);
    color: var(--accent-ink);
    font-size: inherit;
    font-weight: 600;
}

.status-toast > .status-toast-close {
    width: 36px;
    padding: 0;
    color: var(--muted);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.status-toast > .status-toast-action:hover,
.status-toast > .status-toast-close:hover {
    background: var(--tint);
    transition-duration: var(--pk-t-in);
}

.status-toast > .status-toast-close:hover {
    color: var(--ink);
}

.status-toast.status-toast-leaving {
    opacity: 0;
    transform: translateY(0.25rem);
    pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.pk-selecting:not(.pk-editing) > .status-toast {
    bottom: var(--pk-selection-clearance);
}

@media (max-width: 480px) {
    .status-toast {
        bottom: calc(var(--gap-lg) + env(safe-area-inset-bottom));
        left: var(--gap-lg);
    }
}

.container {
    max-width: var(--page);
}

.floating-panel {
    background: var(--raised);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.floating-panel.context-menu {
    padding: var(--gap-xs);
    background: var(--raised);
    border-radius: var(--radius);
    box-shadow: var(--hairline), var(--pk-lift);
}

.context-menu {
    position: fixed;
    z-index: 3000;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    width: -moz-max-content;
    width: max-content;
    min-width: 10rem;
    overflow-y: auto;
    color: var(--ink);
    max-width: calc(100vw - var(--gap-lg));
    max-height: calc(100vh - var(--gap-lg));
    overscroll-behavior: contain;
}

.context-menu.context-menu-bare .context-menu-check {
    display: none;
}

.context-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-sm);
    width: 100%;
    min-height: var(--pk-menu-row);
    padding: 2px var(--gap-md);
    background: none;
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 400;
    text-align: start;
    border-radius: var(--radius-2xs);
    box-shadow: none;
    cursor: pointer;
}

.context-menu .context-menu-item:focus {
    outline: none;
}

.context-menu-item:hover,
.context-menu-item[aria-expanded="true"] {
    background: var(--pk-raised-hover);
    box-shadow: var(--pk-edge);
}

.context-menu-item:focus-visible {
    background: var(--pk-selected);
    box-shadow: var(--pk-edge-selected);
}

.context-menu-item:active {
    background: var(--pk-selected);
    box-shadow: var(--pk-edge-selected);
}

.context-menu-item:disabled {
    color: var(--muted);
    cursor: default;
}

.context-menu-item:disabled:hover {
    background: none;
    box-shadow: none;
}

.context-menu-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    color: var(--accent-ink);
}

.context-menu-check svg {
    width: 14px;
    height: 14px;
}

.context-menu-arrow {
    display: inline-flex;
    flex-shrink: 0;
    margin-right: calc(-1 * var(--gap-xs));
    color: var(--muted);
}

.context-menu-arrow svg {
    width: 14px;
    height: 14px;
}

.context-menu hr {
    height: 1px;
    margin: var(--gap-xs) var(--gap-md);
    border: none;
    background: var(--tint);
}

.context-menu-note {
    display: grid;
    row-gap: 2px;
    max-width: 24rem;
    padding: var(--gap-sm) var(--gap-md) var(--gap-md);
    font-size: var(--text-small);
    line-height: var(--leading);
}

.context-menu-note strong {
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 600;
}

.context-menu-note-text {
    color: var(--nav);
    overflow-wrap: anywhere;
}

.context-menu-label {
    flex: 1;
    min-width: 0;
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-menu-graphic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    color: var(--muted);
}

.context-menu-hint {
    min-width: 0;
    margin-left: var(--gap-lg);
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    text-align: end;
    overflow-wrap: break-word;
}

.context-menu-hint[data-room]::after {
    content: attr(data-room);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

html {
    line-height: var(--leading);
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--tint) transparent;
    background-color: var(--bg-alt);
    color-scheme: dark;
}

body {
    font-family: var(--font);
    font-size: var(--text-lead);
    line-height: var(--leading);
    color: var(--ink);
    background: none;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.prose h1,
.prose h2,
.prose h3 {
    font-weight: 600;
    line-height: var(--leading);
    margin-bottom: var(--gap-md);
    color: var(--ink);
}

h1 {
    font-size: var(--text-display);
}

h2 {
    font-size: var(--text-display);
}

h3 {
    font-size: var(--text-heading);
}

h4 {
    font-size: var(--text-title);
}

h5 {
    font-size: var(--text-lead);
}

h6 {
    font-size: var(--text-body);
}

p {
    margin-bottom: var(--gap-lg);
}

a {
    color: inherit;
    text-decoration: none;
}

a:not([class]):hover {
    text-decoration: underline;
}

.site-nav a:hover {
    text-decoration: none;
}

b,
strong {
    font-weight: 600;
}

small {
    font-size: var(--text-small);
    color: var(--muted);
}

img,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

code,
pre,
.prose code,
.prose pre {
    font-family: var(--font-mono);
    font-size: var(--text-body);
}

pre,
.prose pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--fill);
    border-radius: var(--radius-sm);
    margin: var(--gap-lg) 0;
}

pre code,
.prose pre code {
    padding: 0;
    background: transparent;
}

code,
.prose code {
    padding: 2px var(--gap-xs);
    background: var(--fill);
    border-radius: var(--radius-sm);
}

hr {
    height: 0;
    border-top: 1px solid var(--tint);
    margin: var(--gap-xl) 0;
}

ul,
ol,
.prose ul,
.prose ol {
    padding-left: var(--gap-xl);
    margin-bottom: var(--gap-lg);
}

li {
    margin-bottom: var(--gap-xs);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th,
td {
    text-align: start;
    padding: var(--gap-md);
    border-bottom: 1px solid var(--tint);
}

tr:last-child td {
    border-bottom: none;
}

th {
    font-weight: 600;
    background: var(--fill);
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: var(--leading);
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
}

textarea {
    line-height: var(--leading);
}

summary {
    display: list-item;
    cursor: pointer;
}

.inert {
    pointer-events: none;
}

:disabled,
[aria-busy="true"] {
    --pk-raised-hover: var(--pk-raised);
    --pk-primary-hover: var(--pk-primary);
    --pk-selected-hover: var(--pk-selected);
    cursor: not-allowed;
    opacity: 0.5;
}

[data-loading] {
    opacity: 1;
}

:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
}

::placeholder {
    color: var(--muted);
}

::selection {
    background: var(--pk-blue);
    color: var(--on-accent);
}

address {
    font-style: normal;
}

mark {
    background: var(--tint);
    padding: 1px 2px;
}

details {
    margin-bottom: var(--gap-lg);
}

details[open] summary {
    margin-bottom: var(--gap-sm);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    height: var(--control);
    padding: 0 var(--gap-md);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--fill);
    color: var(--ink);
    font-size: var(--text-body);
    transition: border-color var(--speed);
}

textarea {
    height: auto;
    padding-top: var(--gap-sm);
    padding-bottom: var(--gap-sm);
}

input {
    text-overflow: ellipsis;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-ink);
    outline: none;
}

input[type="text"][readonly],
input[type="email"][readonly],
input[type="password"][readonly],
input[type="tel"][readonly],
input[type="number"][readonly],
input[type="url"][readonly],
input[type="search"][readonly],
input[type="date"][readonly],
input[type="time"][readonly],
input[type="datetime-local"][readonly],
textarea[readonly],
select[readonly] {
    background: var(--bg);
    color: var(--muted);
    cursor: not-allowed;
}

label {
    display: block;
    margin-bottom: var(--gap-sm);
    font-weight: 600;
    color: var(--ink);
}

.switch-row {
    display: grid;
    margin-bottom: 0;
    font-weight: 400;
}

.switch,
.switch:hover {
    display: block;
    align-self: start;
    padding: 0;
    background: var(--line);
    border-radius: var(--radius-pill);
}

.switch[aria-checked='true'] {
    background: var(--accent);
}

.text-link,
.text-link:hover,
.pk-account .prose a {
    display: inline;
    padding: 0;
    background: none;
    color: var(--accent-ink);
    font-size: inherit;
    text-decoration: underline;
}

.text-link:hover,
.pk-account .prose a:hover {
    color: var(--ink);
}

.notice > p {
    margin-bottom: 0;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-lg);
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
}

button,
.button,
.icon-button,
.switch {
    transition: background-color var(--pk-t-out) var(--pk-ease-out), color var(--pk-t-out) var(--pk-ease-out), box-shadow var(--pk-t-out) var(--pk-ease-out);
}

.button,
.pk-editor-action,
#pk-generate-btn {
    background: var(--pk-primary);
    box-shadow: var(--pk-edge-accent);
}

.button {
    min-height: var(--control);
    max-width: none;
    line-height: inherit;
    text-align: inherit;
    white-space: nowrap;
}

.button:active {
    transform: none;
}

.button svg,
.icon-button svg {
    width: auto;
    height: auto;
}

button:hover,
.button:hover {
    background: var(--accent-hover);
    transition-duration: var(--pk-t-in);
}

.button:hover,
.pk-editor-action:hover,
#pk-generate-btn:hover {
    background: var(--pk-primary-hover);
}

.button:active,
.pk-editor-action:active,
#pk-generate-btn:active {
    background: var(--accent-press);
    box-shadow: var(--pk-recess);
    transition-duration: 0s;
}

.button-secondary {
    background: var(--pk-raised);
    color: var(--ink);
    box-shadow: var(--pk-edge);
}

.button-secondary:hover {
    background: var(--pk-raised-hover);
}

.button-secondary:active {
    background: var(--fill);
    box-shadow: var(--pk-recess);
}

.button-text {
    background: none;
    color: var(--muted);
    font-weight: 600;
    box-shadow: none;
}

.button-text:hover,
.button-text:active {
    background: none;
    color: var(--ink);
    box-shadow: none;
}

.button-danger {
    background: var(--danger-fill);
    color: var(--ink);
}

.button-danger:hover {
    background: var(--danger-hover);
    opacity: 1;
}

.button-danger:active {
    background: var(--danger-press);
    box-shadow: var(--pk-recess);
}

.text-muted {
    color: var(--muted);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--control);
    height: var(--control);
    padding: 0;
    background: none;
    color: var(--muted);
    border-radius: var(--radius-xs);
    box-shadow: none;
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1;
}

.icon-button:hover {
    background: var(--pk-raised-hover);
    color: var(--ink);
    box-shadow: var(--pk-edge);
}

.icon-button:active {
    background: var(--fill);
    color: var(--ink);
    box-shadow: var(--pk-recess);
}

.icon-button[aria-pressed="true"] {
    background: var(--pk-selected);
    color: var(--accent-ink);
    box-shadow: var(--pk-edge-selected);
}

.icon-button:disabled,
.icon-button:disabled:hover {
    background: none;
    color: var(--muted);
    box-shadow: none;
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    min-height: var(--control);
    padding: 0 var(--gap-md);
    background: var(--pk-raised);
    color: var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pk-edge);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--speed), color var(--speed), box-shadow var(--speed);
    white-space: nowrap;
}

.chip:hover {
    background: var(--pk-raised-hover);
    color: var(--ink);
}

.chip:active {
    background: var(--fill);
    box-shadow: var(--pk-recess);
}

.pk-color:hover {
    background: var(--tint);
}

.attachment-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.attachment-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--scrim);
    color: var(--ink);
}

.attachment-remove:hover {
    background: var(--bg);
}

.cover-img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
}

.error-toast {
    top: var(--gap-xl);
    right: var(--gap-xl);
    bottom: auto;
    left: auto;
    padding: 0.875rem 1rem;
}

.notice {
    padding: 0.9375rem 1.125rem;
}

@media (max-width: 480px) {
    .error-toast {
        left: var(--gap-lg);
        right: var(--gap-lg);
        width: auto;
        max-width: none;
    }
}

.notice-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.site-nav {
    display: flex;
    align-items: center;
    padding: 0 var(--gap-xl);
    height: 56px;
    background: var(--bg);
}

.pk-nav {
    gap: 2px;
}

.pk-nav,
.pk-editor-top {
    height: calc(var(--pk-bar) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(var(--gutter), calc((100% - var(--pk-page)) / 2 + var(--gutter))) 0;
}

.pk-menubar {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.pk-menu-title {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: var(--gap-xs);
    min-height: var(--control);
    padding: 0 var(--gap-md);
    background: none;
    color: var(--nav);
    font-size: var(--text-body);
    font-weight: 400;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.pk-menu-title:hover,
.pk-menu-title[aria-expanded="true"] {
    background: var(--pk-raised-hover);
    color: var(--ink);
    box-shadow: var(--pk-edge);
}

.pk-menu-logo {
    justify-content: center;
    min-width: var(--control);
    padding: 0;
    color: var(--ink);
}

.pk-menu-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

@media (max-width: 640px) {
    .pk-nav,
    .pk-editor-top {
        padding-right: var(--gap-sm);
        padding-left: var(--gap-sm);
    }

    .pk-menu-title {
        padding: 0 var(--gap-sm);
    }
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    color: var(--on-accent);
    background: var(--accent);
    font-size: var(--text-xs);
    font-weight: 600;
}

.modal {
    justify-content: center;
    overflow: hidden;
}

.modal:not(.pk-lightbox) {
    align-items: center;
    padding: max(var(--gap-xl), env(safe-area-inset-top)) var(--gap-lg) max(var(--gap-xl), env(safe-area-inset-bottom));
}

.modal-inner,
.modal-sheet .modal-inner {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    padding: 0;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (pointer: coarse) {
    .modal-inner::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        margin: var(--gap-md) auto 0;
        border-radius: var(--radius-pill);
        background: var(--muted);
        opacity: 0.5;
        flex-shrink: 0;
    }
}

.modal .modal-inner {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--speed), transform var(--speed);
}

.modal.modal-shown .modal-inner {
    opacity: 1;
    transform: translateY(0);
}

.modal-close {
    top: var(--gap-lg);
    right: var(--gap-lg);
}

.modal-header {
    flex-shrink: 0;
    padding: var(--gap-xl) var(--gap-xl) 0;
}

.modal-close ~ .modal-header {
    padding-right: calc(var(--gap-lg) + var(--control) + var(--gap-sm));
}

.modal-header h2 {
    margin: 0;
    font-size: var(--text-title);
    font-weight: 600;
    line-height: var(--leading-tight);
}

.modal-header + * {
    margin-top: 0;
}

.modal-sheet .modal-inner {
    max-width: 35rem;
}

.modal-sheet-head {
    padding: var(--gap-lg) var(--gap-lg) 0 var(--gap-xl);
    border-top: 0;
}

.title {
    font-size: var(--text-title);
    line-height: var(--leading-tight);
}

.heading {
    font-size: var(--text-heading);
    line-height: var(--leading-tight);
}

.modal-body,
.modal-sheet .modal-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--gap-md) var(--gap-xl) var(--gap-xl);
}

.modal-body > * + * {
    margin-top: var(--gap-md);
}

.modal-body > .text-muted {
    margin-bottom: 0;
    font-size: var(--text-body);
    line-height: var(--leading);
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
    padding: 0 var(--gap-xl) var(--gap-xl);
}

.modal-footer > * {
    margin: 0;
}

.modal-footer > * + * {
    margin-left: var(--gap-sm);
}

.modal-confirm {
    max-width: 420px;
}

#file-viewer .modal-inner {
    width: auto;
    min-width: 320px;
    max-width: 1100px;
}

@media (max-width: 1170.2128px) {
    #file-viewer .modal-inner {
        max-width: 94vw;
    }
}

@media (max-width: 340.4255px) {
    #file-viewer .modal-inner {
        min-width: 94vw;
    }
}

#file-viewer .file-viewer-head {
    flex-shrink: 0;
    padding: var(--gap-md) var(--gap-lg);
}

#file-viewer .file-viewer-title {
    margin: 0;
    font-size: var(--text-lead);
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    width: 0;
    flex-grow: 1;
}

#file-viewer .file-viewer-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#file-viewer .file-viewer-actions > :not([hidden]):not([type="hidden"]) ~ :not([hidden]):not([type="hidden"]) {
    margin-left: var(--gap-xs);
}

.icon-default svg,
.icon-copied svg {
    max-width: none;
}

#file-viewer .modal-body {
    padding: 0;
}

#file-viewer .file-viewer-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

#file-viewer .file-viewer-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

#file-viewer .file-viewer-content video,
#file-viewer .file-viewer-content audio {
    max-width: 100%;
    max-height: 80vh;
}

#file-viewer .file-viewer-content iframe {
    width: 100%;
    height: 80vh;
    border: none;
    background: var(--ink);
    display: block;
}

#file-viewer .file-viewer-text-wrap pre {
    margin: 0;
    padding: var(--gap-xl);
    max-height: 75vh;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: var(--text-body);
    line-height: var(--leading);
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

@media (hover: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea:not(.pk-text-editor),
    select {
        font-size: var(--text-lead) !important;
    }
}

.pk-studio a[href],
.pk-studio img,
.pk-studio canvas,
.pk-lightbox img,
.pk-lightbox canvas,
.pk-tasks-body img {
    -webkit-touch-callout: none;
}

.pk-studio img:not([src]),
.pk-lightbox img:not([src]),
.pk-tasks-body img:not([src]) {
    visibility: hidden;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background-color: var(--fill);
}

th,
td,
hr {
    border: none;
}

.pk-studio {
    --page: var(--pk-page);
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--pk-gutter);
    padding-top: var(--pk-gutter);
    padding-bottom: var(--pk-gutter);
    align-items: flex-start;
}

.pk-sidebar {
    position: sticky;
    top: var(--pk-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: calc(100vh - var(--pk-bar) - 2 * var(--pk-gutter));
    padding: var(--gap-sm);
    background: var(--bg);
    border-radius: var(--radius);
}

.pk-main {
    min-width: 0;
}

.pk-mobile-bar {
    display: none;
}

.pk-sidebar-list {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--gap-xs);
}

#pk-folder-list {
    --pk-fade-axis: to bottom;

    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.pk-nav-item {
    display: flex;
    align-items: center;

    justify-content: flex-start;
    gap: var(--gap-sm);
    width: 100%;
    min-height: max(40px, var(--control));
    padding: var(--gap-sm) var(--gap-md);
    background: none;
    color: var(--muted);
    font-size: var(--text-body);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-align: start;
    flex-shrink: 0;
}

.pk-nav-item:hover {
    background: var(--pk-raised-hover);
    color: var(--ink);
    box-shadow: var(--pk-edge);
}

.pk-nav-item:active {
    box-shadow: var(--pk-recess);
}

.pk-nav-item.active {
    background: var(--pk-selected);
    color: var(--accent-ink);
    box-shadow: var(--pk-edge-selected);
}

.pk-nav-item[data-menu-target] {
    box-shadow: var(--pk-edge-selected);
}

[data-menu-single] .pk-nav-item.active:not([data-menu-target]) {
    box-shadow: none;
}

.pk-nav-item.pk-drop-over,
.pk-menu-title.pk-drop-over {
    background: rgba(var(--pk-blue-rgb), 0.2);
    color: var(--ink);
}

.pk-nav-item.pk-nav-row {
    padding: 0;
    gap: 0;
}

.pk-nav-link {
    display: flex;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
    min-height: inherit;
    padding: var(--gap-sm) var(--gap-md);
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: start;
}

.pk-nav-link:hover {
    background: none;
    color: inherit;
}

.pk-nav-link > svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.pk-cast-add,
.pk-cast-photo-add {
    background: var(--fill);
}

.pk-cast-add:hover,
.pk-cast-photo-add:hover {
    background: var(--tint);
}

.pk-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-nav-count {
    font-size: var(--text-small);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.pk-nav-slot {
    display: grid;
    align-self: stretch;
    align-items: center;
    justify-items: end;
}

.pk-nav-slot > * {
    grid-area: 1 / 1;
}

.pk-nav-slot .pk-nav-count {
    margin-right: var(--gap-md);
}

.pk-nav-more {
    align-self: stretch;
    justify-content: flex-end;
    min-width: 32px;
    padding: 0 var(--gap-md) 0 var(--gap-xs);
    background: none;
    color: var(--muted);
    opacity: 0;
    pointer-events: none;
}

.pk-nav-more:hover {
    background: none;
    color: var(--ink);
}

.pk-nav-item[data-menu-target] .pk-nav-more {
    opacity: 1;
    pointer-events: auto;
}

.pk-nav-more:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.pk-nav-item[data-menu-target] .pk-nav-count {
    visibility: hidden;
}

.pk-nav-more:focus-visible + .pk-nav-count {
    visibility: hidden;
}

@media (hover: hover) {
    .pk-nav-item:hover .pk-nav-more {
        opacity: 1;
        pointer-events: auto;
    }

    .pk-nav-item:hover .pk-nav-slot .pk-nav-count {
        visibility: hidden;
    }
}

@media (hover: none) {
    .pk-nav-item.active .pk-nav-more {
        opacity: 1;
        pointer-events: auto;
    }

    .pk-nav-item.active .pk-nav-slot .pk-nav-count {
        visibility: hidden;
    }
}

.pk-nav-item.pk-nav-editing .pk-nav-slot {
    display: none;
}

.pk-nav-item.pk-nav-editing .pk-rename-input {
    margin-left: calc(var(--gap-xl) - var(--gap-xs));
}

.pk-nav-item .pk-rename-input {
    flex: 1;
    min-width: 0;
    margin-top: -2px;
    margin-bottom: -2px;
    margin-left: calc(var(--gap-xs) * -1);
    padding: 1px var(--gap-xs);
    font-size: var(--text-body);
    line-height: var(--leading);
    border-radius: var(--radius-sm);
}

.pk-view-title {
    display: flex;
    align-items: center;
    min-height: var(--pk-toolbar);
    font-size: var(--text-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin-top: 0;
    margin-bottom: var(--gap-lg);
}

#pk-gallery {
    position: relative;
}

.pk-composer {
    position: sticky;
    top: var(--pk-gutter);
    z-index: 20;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2 * var(--pk-gutter));
    margin-bottom: var(--pk-gutter);
    background: var(--bg);
    border-radius: var(--radius);
    outline: 2px solid transparent;
    transition: outline-color var(--speed);
}

.pk-composer-body {
    min-height: 0;
    padding: var(--gap-sm) var(--gap-sm) 0;
    overflow-y: auto;
}

.pk-composer.pk-drop-over {
    outline-color: var(--pk-blue);
}

.pk-prompts::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--radius);
    outline: 2px solid var(--pk-blue);
    opacity: 0;
    transition: opacity var(--speed);
    pointer-events: none;
}

.pk-prompts:focus-within::after {
    opacity: 1;
}

.pk-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.pk-prompt-row {
    display: flex;
    align-items: flex-start;
}

.pk-prompt-row textarea {
    flex: 1;
    resize: none;
    background: none;
    border: none;
    padding: var(--gap-sm) var(--gap-md);
    font-size: var(--text-lead);
    line-height: var(--leading);
    min-height: calc(2 * var(--text-lead) * var(--leading) + 2 * var(--gap-sm));
    max-height: 40vh;
    overflow-y: auto;
    color: var(--ink);
}

.pk-prompt-row textarea:focus {
    outline: none;
}

.pk-composer-bar {
    flex-wrap: wrap;
    padding: var(--gap-sm);
}

.pk-chips {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--gap-xs);
    min-width: min-content;
}

.pk-chip-value {
    display: grid;
    grid-template-areas: 'value';
    align-items: center;
    justify-items: start;
}

.pk-chip-value > span {
    grid-area: value;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    visibility: hidden;
    white-space: nowrap;
}

.pk-chip-value > span.active {
    visibility: visible;
}

.chip svg {
    flex-shrink: 0;
    height: auto;
    opacity: 0.75;
}

.chip[aria-pressed="true"],
.chip[data-on] {
    background: var(--pk-selected);
    color: var(--accent-ink);
    box-shadow: var(--pk-edge-selected);
}

.chip[aria-pressed="true"]:hover,
.chip[data-on]:hover {
    background: var(--pk-selected-hover);
}

.chip[aria-pressed="true"] svg,
.chip[data-on] svg {
    opacity: 0.9;
}

.chip.pk-chip-over {
    background: var(--danger-soft);
    color: var(--danger);
}

.chip.pk-chip-over svg {
    opacity: 0.9;
}

.pk-composer-send {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-left: auto;
}

#pk-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    min-height: var(--control);
    padding: 0 var(--gap-xl);
    font-size: var(--text-body);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.pk-short-note,
.pk-short > :not(.pk-short-note) {
    display: none;
}

.pk-short .pk-short-note {
    display: inline;
}

.pk-short {
    --pk-primary: #b91c1c;
    --pk-primary-hover: #c62828;
    --accent-press: #991b1b;
}

#pk-chip-model {
    justify-content: space-between;
    gap: var(--gap-sm);
    min-width: 0;
    max-width: 100%;
}

.pk-model-summary .pk-chip-value {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    height: calc(1em * var(--leading));
    line-height: var(--leading);
    overflow: hidden;
}

.pk-model-summary .pk-chip-value > span {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.pk-model-summary .pk-chip-value > span.active {
    order: -1;
}

.pk-model-summary .pk-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-model-summary .pk-chip-provider {
    white-space: pre;
}

@media (max-width: 760px) {
    #pk-add-refs-label,
    #pk-chip-style-label {
        display: none;
    }

    #pk-add-refs,
    #pk-chip-style {
        flex: none;
        justify-content: center;
        width: var(--control);
        padding: 0;
    }

    #pk-add-refs svg,
    #pk-chip-style svg {
        width: 18px;
        height: 18px;
    }

    #pk-chip-style[data-off]::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transform: rotate(-45deg);
    }
}

@media (max-width: 640px) {
    .pk-composer-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gap-sm);
    }

    .pk-composer-send {
        width: 100%;
    }

    .pk-chips {
        min-width: 0;
    }

    #pk-chip-model,
    #pk-chip-compare {
        flex: 1 1 auto;
    }

    #pk-chip-size,
    #pk-chip-shape {
        flex: none;
    }

    #pk-chip-model > svg,
    #pk-chip-compare > svg,
    #pk-chip-size > svg,
    #pk-chip-shape > svg,
    .pk-chips .pk-chip-provider,
    .pk-chips .pk-chip-level {
        display: none;
    }

    #pk-generate-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    #pk-selection-library .pk-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    #pk-selection-library button {
        justify-content: center;
        width: var(--control);
        padding: 0;
    }
}

@media (max-width: 640px) and (pointer: coarse) {
    #pk-generate-btn {
        min-height: 48px;
    }
}

.pk-ref-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-xs) 0;
}

.pk-ref-item {
    position: relative;
    cursor: grab;
}

.pk-ref-item span {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 1px var(--gap-xs);
    background: var(--scrim);
    color: var(--ink);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}

.pk-ref-item button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--raised);
    color: var(--ink);
    font-size: var(--text-body);
    line-height: 1;
    border-radius: var(--radius-sm);
}

.pk-ref-item button:hover {
    background: var(--danger-fill);
    color: var(--on-accent);
}

.pk-hint {
    font-size: var(--text-small);
    color: var(--muted);
    margin-top: var(--gap-sm);
    margin-bottom: 0;
}

#pk-ref-hint {
    padding-left: var(--gap-xs);
    padding-right: var(--gap-xs);
}

.pk-composer-error {
    margin: var(--gap-sm) var(--gap-xs) 0;
}

.pk-drop-overlay {
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    background: rgba(var(--pk-blue-rgb), 0.12);
    outline: 2px dashed var(--pk-blue);
    outline-offset: -2px;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: var(--text-lead);
    font-weight: 600;
    pointer-events: none;
}

#pk-gallery-drop .chip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: var(--gap-sm);
    padding: var(--gap-lg) var(--gap-xl);
    background: var(--raised);
    color: var(--ink);
    font-size: var(--text-lead);
    box-shadow: var(--shadow), var(--hairline);
}

.pk-tile-placeholder {
    cursor: default;
}

.pk-tile > .cover-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pk-tile > .cover-img.pk-loaded {
    opacity: 1;
}

.pk-tile > .cover-img.pk-swap {
    transition: none;
}

.pk-animated {
    visibility: hidden;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    :hover > .pk-animated {
        visibility: visible;
    }

    :hover > .pk-poster {
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: no-preference) {
    :focus-visible > .pk-animated {
        visibility: visible;
    }

    :focus-visible > .pk-poster {
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-tile > .cover-img {
        transition: none;
    }
}

.pk-tile {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--speed);

    box-shadow: var(--hairline);
}

.pk-tile::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.pk-tile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.pk-tile.selected,
.pk-tile[data-menu-target],
.pk-version-pick-tile.selected {
    outline-color: var(--pk-blue);
}

.pk-tile:focus:not(:focus-visible) {
    outline: 2px solid transparent;
}

.pk-tile.selected:focus:not(:focus-visible),
.pk-tile[data-menu-target]:focus:not(:focus-visible) {
    outline-color: var(--pk-blue);
}

[data-menu-single] > .pk-tile.selected:not([data-menu-target]),
[data-menu-single] > .pk-cast-card.selected:not([data-menu-target]) .pk-cast-cover {
    outline-color: transparent;
}

.pk-tile:focus-visible,
.pk-version-pick-tile:focus-visible {
    outline-color: var(--accent-ink);
}

.pk-tile.pk-removing,
.pk-version.pk-removing,
.pk-board-tile.pk-removing,
.pk-cast-photo.pk-removing {
    pointer-events: none;
}

.pk-tile.pk-removing > *,
.pk-version.pk-removing > *,
.pk-board-tile.pk-removing > *,
.pk-cast-photo.pk-removing > * {
    opacity: 0.35;
    filter: grayscale(1);
    transition: opacity var(--speed), filter var(--speed);
}

.pk-tile.pk-removing::after,
.pk-version.pk-removing::after,
.pk-board-tile.pk-removing::after,
.pk-cast-photo.pk-removing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    color: var(--ink);
    background: currentColor;
    -webkit-mask: var(--spinner-glyph) center / contain no-repeat;
    mask: var(--spinner-glyph) center / contain no-repeat;
    animation: spin 0.8s linear infinite, pk-appear 0.15s linear 0.4s both;
}

@keyframes pk-appear {
    from {
        opacity: 0;
    }
}

.pk-version.pk-removing::after {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
}

.pk-tile-error {
    cursor: default;
}

.pk-failure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-md);
    text-align: center;
}

.pk-failure-icon {
    display: inline-flex;
    margin-bottom: var(--gap-xs);
    color: var(--danger);
}

.pk-failure-title {
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.pk-failure-message {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading);
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.pk-failure-message:not(:last-child) {
    -webkit-line-clamp: 2;
}

.pk-failure-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-top: var(--gap-sm);
    padding: var(--gap-xs) var(--gap-md);
    background: var(--pk-selected);
    color: var(--accent-ink);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
    box-shadow: var(--pk-edge-selected);
    text-decoration: none;
    text-wrap: balance;
    transition: background-color var(--speed);
}

.pk-failure-action:hover {
    background: var(--pk-selected-hover);
    color: var(--accent-ink);
}

.pk-stack {
    position: absolute;
    right: var(--gap-sm);
    bottom: var(--gap-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-xs) var(--gap-sm);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.pk-stack .spinner-ring {
    display: none;
    width: 14px;
    height: 14px;
}

.pk-stack.pk-stack-generating svg {
    display: none;
}

.pk-stack.pk-stack-generating .spinner-ring {
    display: inline-block;
}

.pk-tile-restore {
    position: absolute;
    top: var(--gap-sm);
    right: var(--gap-sm);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 var(--gap-md) 0 10px;
    background: var(--bg);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-sm);
    box-shadow: none;
    opacity: 0;
    transition: opacity var(--speed), background-color var(--pk-t-out) var(--pk-ease-out);
}

.pk-tile:hover .pk-tile-restore,
.pk-tile-restore:focus {
    opacity: 1;
}

.pk-tile-restore:hover {
    background: var(--raised);
    transition-duration: var(--speed), var(--pk-t-in);
}

.pk-tile-restore svg {
    flex-shrink: 0;
}

@media (hover: none) {
    .pk-tile-restore {
        min-height: 36px;
        opacity: 1;
    }
}

.pk-badge {
    position: absolute;
    left: var(--gap-sm);
    bottom: var(--gap-sm);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px 0 8px;
    background: var(--scrim);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.pk-badge svg,
.pk-badge .spinner-ring {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.pk-badge svg {
    color: var(--warning);
}

.pk-badge-danger svg {
    color: var(--danger);
}

.pk-version .pk-badge {
    left: 3px;
    bottom: 3px;
    min-height: 0;
    padding: 2px;
}

.pk-version .pk-badge-label,
[data-compact-thumbnails] .pk-tile .pk-badge-label,
[data-compact-thumbnails] .pk-tile .pk-failure-message,
[data-compact-thumbnails] .pk-tile .pk-failure-action,
[data-compact-thumbnails] .pk-tile-restore > span {
    display: none;
}

[data-compact-thumbnails] .pk-tile .pk-badge {
    padding: 0 6px;
}

[data-compact-thumbnails] .pk-tile-restore {
    padding: 0 var(--gap-sm);
}

.pk-tile-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-tile.pk-tile-error {
    background: var(--bg);
    box-shadow: var(--hairline);
}

.pk-pending {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: var(--bg);
    border-radius: inherit;
    box-shadow: var(--hairline);
}

.pk-pending-preview {
    position: absolute;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    filter: blur(7px) saturate(0.85);
    opacity: 0.7;
}

.pk-pending-preview img {
    height: 100%;
}

.pk-pending-preview.pk-pending-partial {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: none;
    opacity: 1;
    animation: pk-appear 0.6s ease-out both;
}

.pk-editor-watch {
    grid-area: 1 / 1;
    place-self: center;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 2px 24px rgb(0 0 0 / 0.5);
}

.pk-editor-watch .pk-pending-label {
    padding: 10px var(--gap-lg);
    font-size: var(--text-body);
    transform: scale(var(--pk-unzoom));
}

.pk-pending-mesh {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.pk-pending-mesh::before,
.pk-pending-mesh::after {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    border-radius: var(--radius-pill);
    will-change: transform;
}

.pk-pending-mesh::before {
    top: -55%;
    left: -45%;
    background: radial-gradient(closest-side, rgba(var(--pk-blue-rgb), 0.2), transparent 78%);
    animation: pk-pending-drift-a 16s ease-in-out infinite alternate;
    animation-delay: calc(var(--pk-seed) * -16s);
}

.pk-pending-mesh::after {
    bottom: -60%;
    right: -40%;
    background: radial-gradient(closest-side, rgba(var(--pk-blue-rgb), 0.12), transparent 78%);
    animation: pk-pending-drift-b 21s ease-in-out infinite alternate;
    animation-delay: calc(var(--pk-seed) * -21s);
}

@keyframes pk-pending-drift-a {
    to {
        transform: translate(30%, 26%);
    }
}

@keyframes pk-pending-drift-b {
    to {
        transform: translate(-28%, -30%);
    }
}

.pk-shimmer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 50%);
}

.pk-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -250%;
    width: 400%;
    background: linear-gradient(98deg, rgba(220, 235, 255, 0) 44%, rgba(220, 235, 255, 0.04) 47%, rgba(220, 235, 255, 0.15) 49.5%, rgba(220, 235, 255, 0.18) 50%, rgba(220, 235, 255, 0.15) 50.5%, rgba(220, 235, 255, 0.04) 53%, rgba(220, 235, 255, 0) 56%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), #000 30%, #000 70%, rgba(0, 0, 0, 0.3));
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), #000 30%, #000 70%, rgba(0, 0, 0, 0.3));
    animation: pk-shimmer-sweep 4.8s cubic-bezier(0.45, 0, 0.3, 1) infinite;
    animation-delay: calc(var(--pk-seed) * -4.8s);
    will-change: transform;
}

@keyframes pk-shimmer-sweep {
    from {
        transform: translate(0, 0);
    }

    70%,
    to {
        transform: translate(50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-shimmer::after,
    .pk-pending-mesh::before,
    .pk-pending-mesh::after {
        animation: none;
    }
}

.pk-pending-label {
    gap: var(--gap-sm);
    max-width: calc(100% - var(--gap-lg));
    padding: var(--gap-sm) var(--gap-md);
    background: var(--scrim);
    color: var(--ink);
    border-radius: var(--radius-sm);
    pointer-events: none;
}

@media (max-width: 480px) {
    .pk-pending-label {
        padding-left: var(--gap-sm);
        padding-right: var(--gap-sm);
    }

    .pk-pending-label .spinner-ring {
        display: none;
    }
}

.pk-pending-text {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gap-xs);
    white-space: nowrap;
}

.pk-pending-time {
    display: inline-block;
    min-width: 4ch;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.pk-gallery-head {
    gap: var(--gap-lg);
    flex-wrap: wrap;
    margin-bottom: var(--gap-lg);
}

.pk-gallery-head > * {
    min-width: 0;
}

.pk-gallery-head .pk-view-title {
    overflow-wrap: break-word;
    margin-bottom: 0;
    margin-right: auto;
}

.pk-selecting .pk-main {
    padding-bottom: var(--pk-selection-clearance, 90px);
}

.pk-selection-bar {
    position: fixed;
    bottom: var(--pk-selection-inset);
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 100;
    gap: var(--gap-lg);
    flex-wrap: wrap;
    width: min(680px, calc(100vw - var(--gap-2xl)));
    padding: var(--gap-sm) var(--gap-lg);

    background: var(--raised);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: var(--text-body);
    color: var(--ink);
}

.pk-selection-actions {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

.pk-empty {
    color: var(--muted);
    padding-top: var(--gap-3xl);
    padding-bottom: var(--gap-3xl);
    text-align: center;
}

.pk-grid,
.pk-cast-grid,
.pk-cast-photos {
    --pk-grid-gap: var(--gap-lg);
    display: grid;
    grid-template-columns: repeat(auto-fill, min(var(--pk-thumbnail), (100% - var(--pk-grid-gap)) / 2));
    gap: var(--pk-grid-gap);
}

.pk-grid > * {
    scroll-margin-top: calc(var(--pk-composer-height) + 2 * var(--pk-gutter));
}

.pk-lifted {
    opacity: 0.35;
    transition: opacity var(--speed);
}

.pk-tile.pk-drop-over {
    outline-color: var(--pk-blue);
}

.pk-tile.pk-drop-over::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(var(--pk-blue-rgb), 0.2);
    pointer-events: none;
}

.pk-select-check {
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: var(--scrim);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1.5px var(--nav);
    opacity: 0;
    transition: opacity var(--speed);
    z-index: 1;
}

.pk-select-check:hover {
    background: var(--bg);
}

.pk-tile:hover .pk-select-check,
.pk-cast-card:hover .pk-select-check,
.pk-version:hover .pk-select-check,
.pk-version-pick-tile:hover .pk-select-check,
.pk-tile.selected .pk-select-check,
.pk-cast-card.selected .pk-select-check,
.pk-version.selected .pk-select-check,
.pk-version-pick-tile.selected .pk-select-check {
    opacity: 1;
}

.pk-select-check:focus-visible {
    opacity: 1;
}

.pk-tile.selected .pk-select-check,
.pk-cast-card.selected .pk-select-check,
.pk-version.selected .pk-select-check,
.pk-version-pick-tile.selected .pk-select-check {
    background: var(--pk-blue);
    box-shadow: inset 0 0 0 1.5px var(--pk-blue);
}

.pk-tile.selected .pk-select-check:hover,
.pk-cast-card.selected .pk-select-check:hover,
.pk-version.selected .pk-select-check:hover,
.pk-version-pick-tile.selected .pk-select-check:hover {
    background: var(--pk-blue);
}

.pk-tile.selected .pk-select-check::after,
.pk-cast-card.selected .pk-select-check::after,
.pk-version.selected .pk-select-check::after,
.pk-version-pick-tile.selected .pk-select-check::after {
    content: '✓';
    display: block;
    color: var(--on-accent);
    font-size: var(--text-small);
}

.pk-load-more {
    display: flex;
    justify-content: center;
    padding-top: var(--gap-xl);
    padding-bottom: var(--gap-xl);
    color: var(--muted);
    font-size: var(--text-lead);
}

@media (hover: none) {
    .pk-select-check {
        opacity: 1;
    }
}

.pk-cast-lead {
    max-width: 52ch;
    color: var(--muted);
    font-size: var(--text-lead);
    line-height: var(--leading);
    margin-top: calc(-1 * var(--gap-md));
    margin-bottom: var(--gap-2xl);
}

.pk-cast-lead p:last-child {
    margin-bottom: 0;
}

.pk-cast-lead em {
    font-style: normal;
    color: var(--ink);
}

.pk-cast-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.pk-cast-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    color: var(--line);
    margin-bottom: var(--gap-sm);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--speed);
}

.pk-cast-cover::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.pk-cast-cover img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.pk-cast-cover svg {
    width: 28px;
    height: 28px;
}

.pk-cast-card.selected .pk-cast-cover,
.pk-cast-card[data-menu-target] .pk-cast-cover {
    outline-color: var(--pk-blue);
}

.pk-cast-card-name {
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 600;
    overflow-wrap: break-word;
}

.pk-cast-card-meta {
    color: var(--muted);
    font-size: var(--text-small);
    overflow-wrap: break-word;
}

.pk-cast-add {
    position: relative;
    align-self: flex-start;
    display: block;
    padding: 0;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: var(--text-body);
    font-weight: 600;
}

.pk-cast-add::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.pk-cast-add-body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    padding: var(--gap-lg);
}

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

.pk-cast-add-mark {
    font-size: var(--text-heading);
    line-height: 1;
}

.pk-cast-detail {
    position: relative;
    max-width: 640px;
}

.pk-cast-head {
    display: flex;
    align-items: center;
    min-height: var(--pk-toolbar);
}

.pk-cast-back {
    margin-left: calc(var(--gap-sm) * -1);
}

.pk-cast-detail .pk-cast-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 24ch;
    height: auto;
    padding: 2px var(--gap-sm);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--text-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    transition: background var(--speed);
}

.pk-cast-detail .pk-cast-name:hover {
    background: var(--fill);
}

.pk-cast-detail .pk-cast-name:focus {
    background: var(--fill);
    outline: none;
}

.pk-cast-handle {
    color: var(--muted);
    font-size: var(--text-small);
    margin-top: var(--gap-xs);
    margin-bottom: var(--gap-lg);
}

.pk-cast-detail .pk-cast-description {
    width: 100%;
    padding: var(--gap-sm) var(--gap-lg);
    background: var(--fill);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--text-body);
    margin-bottom: var(--gap-2xl);
}

.pk-cast-detail .pk-cast-description:focus {
    outline: 1px solid var(--line);
    outline-offset: 0;
}

.pk-cast-photos {
    --pk-grid-gap: var(--gap-md);
}

.pk-cast-photo {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    cursor: pointer;
}

.pk-cast-photo-rest > img {
    opacity: 0.4;
    transition: opacity var(--pk-t-out) var(--pk-ease-out);
}

.pk-cast-photo-rest:hover > img {
    opacity: 0.7;
    transition-duration: var(--pk-t-in);
}

.pk-cast-note {
    max-width: 68ch;
    margin: var(--gap-md) 0 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading);
}

.pk-cast-photo::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.pk-cast-photo img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.pk-cast-photo > .attachment-remove {
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity var(--speed);
}

.pk-cast-photo > .attachment-remove:hover {
    background: var(--danger-fill);
}

.pk-cast-photo > .attachment-remove:focus,
.pk-cast-photo:hover > .attachment-remove {
    opacity: 1;
}

@media (hover: none) {
    .pk-cast-photo > .attachment-remove {
        opacity: 1;
    }
}

.pk-cast-photo-add {
    display: block;
    padding: 0;
    color: var(--muted);
    font-size: var(--text-body);
    font-weight: 600;
}

.pk-cast-photo-add:hover {
    color: var(--ink);
}

.pk-cast-delete {
    margin-top: var(--gap-2xl);
    padding-left: 0;
    padding-right: 0;
    color: var(--muted);
}

.pk-cast-delete:hover,
.pk-api-revoke:hover {
    color: var(--danger);
}

.pk-menu-thumb {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    display: block;
}

.pk-mention-menu .context-menu-graphic {
    width: 22px;
}

.context-menu.pk-mention-menu .context-menu-item {
    background: none;
    box-shadow: none;
    transition: none;
}

.context-menu.pk-mention-menu .context-menu-item.highlighted {
    background: var(--pk-selected);
    color: var(--ink);
    box-shadow: var(--pk-edge-selected);
}

.pk-nav-pending {
    opacity: 0.55;
    pointer-events: none;
}

.pk-marquee {
    position: fixed;
    z-index: 10;
    background: rgba(var(--pk-blue-rgb), 0.12);
    box-shadow: inset 0 0 0 1px var(--pk-blue);
    border-radius: var(--radius-sm);
    pointer-events: none;
}

body.pk-marquee-active {
    -webkit-user-select: none;
    user-select: none;
}

.pk-sidebar,
.pk-mobile-bar,
.pk-gallery-head,
.pk-grid,
.pk-cast-grid,
.pk-version-pick,
.pk-cast-photos,
.pk-selection-bar,
.pk-composer-bar,
.pk-ref-list,
.pk-lightbox-stage,
.pk-editor-top,
.pk-editor-versions,
.pk-editor-inspector {
    -webkit-user-select: none;
    user-select: none;
}

.pk-sidebar input,
.pk-sidebar textarea,
.pk-mobile-bar input,
.pk-mobile-bar textarea,
.pk-gallery-head input,
.pk-gallery-head textarea,
.pk-grid input,
.pk-grid textarea,
.pk-cast-grid input,
.pk-cast-grid textarea,
.pk-cast-photos input,
.pk-cast-photos textarea,
.pk-selection-bar input,
.pk-selection-bar textarea,
.pk-composer-bar input,
.pk-composer-bar textarea,
.pk-ref-list input,
.pk-ref-list textarea,
.pk-lightbox-stage input,
.pk-lightbox-stage textarea,
.pk-editor-inspector input,
.pk-editor-inspector textarea {
    -webkit-user-select: text;
    user-select: text;
}

.pk-ratio-swatch {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1.5px currentColor;
    flex-shrink: 0;
}

.pk-ratio-swatch-auto {
    width: 13px;
    height: 13px;
    box-shadow: none;
    outline: 1.5px dashed currentColor;
    outline-offset: -1.5px;
}

.pk-lightbox {
    --pk-editor-height: 100vh;
    --pk-editor-top: 0px;
    --pk-inspector: clamp(320px, 26vw, 360px);
    --pk-handle: 24px;
    height: var(--pk-editor-height);
    max-height: var(--pk-editor-height);
    top: var(--pk-editor-top);
    bottom: auto;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    display: none;
    grid-template-columns: minmax(0, 1fr) var(--pk-inspector);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "stage inspector" "versions inspector";
    place-items: stretch;
    overflow: hidden;
    background: var(--pk-stage);
    color: var(--ink);
    font-size: var(--text-small);
    transition: none;
}

@media (pointer: coarse) {
    .pk-lightbox {
        --pk-handle: 44px;
    }
}

.pk-lightbox[open] {
    display: grid;
}

.pk-opening {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: linear-gradient(var(--bg), var(--bg)) top / 100% calc(var(--pk-bar) + env(safe-area-inset-top)) no-repeat, var(--pk-stage);
    color: var(--muted);
}

.pk-opening .spinner-ring {
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite, pk-appear 0.15s linear 0.4s both;
}

.pk-lightbox.modal-shown {
    background: var(--pk-stage);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.pk-editor-top {
    position: relative;
    grid-area: top;
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    align-items: center;
    gap: var(--gap-md);
    min-width: 0;
    background: var(--bg);
}

.pk-editor-icon {
    width: 36px;
    height: 36px;
}

.pk-editor-batch {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-editor-back {
    justify-self: center;
    max-width: 100%;
    padding-left: var(--gap-xs);
}

.pk-editor-back svg {
    flex: none;
}

.pk-editor-back span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-prompt-quote {
    margin: 0;
    padding-left: 0.45em;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
    text-indent: -0.45em;
    white-space: pre-line;
    overflow-wrap: break-word;
}

.pk-prompt-quote::before {
    content: '\201C';
}

.pk-prompt-quote::after {
    content: '\201D';
}

.pk-facts .pk-properties-prompt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--gap-sm);
}

.pk-properties-texts {
    display: grid;
    gap: var(--gap-md);
}

.pk-properties-text {
    margin: 0;
    white-space: pre-line;
}

@media (max-width: 640px) {
    .pk-facts .pk-properties-prompt {
        grid-column: 1 / -1;
    }
}

.pk-properties-copy {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: start;
    width: 32px;
    height: 32px;
    margin: -6px -8px -6px 0;
    color: var(--muted);
}

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

.pk-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px var(--gap-lg);
    margin: 0;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading);
}

.pk-facts dt {
    color: var(--muted);
}

.pk-facts dd {
    margin: 0;
    color: var(--ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pk-editor-close {
    grid-column: 3;
    justify-self: end;
}

.pk-editor-history {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 2px;
    min-width: 0;
}

.pk-editor-history .pk-menubar {
    margin-right: var(--gap-sm);
}

.pk-menu-all {
    display: none;
}

@media (max-width: 640px) {
    .pk-menubar .pk-menu-named {
        display: none;
    }

    .pk-menubar .pk-menu-all {
        display: inline-flex;
        justify-content: center;
        min-width: var(--control);
        padding: 0;
    }
}

.pk-editor-status {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 0;
    margin: 0 var(--gap-sm);
    color: var(--muted);
    font-size: var(--text-small);
    white-space: nowrap;
}

.pk-editor-status[data-status="failed"] {
    color: var(--danger);
}

.pk-editor-status .button-text {
    padding: 0;
    color: var(--accent-ink);
    font-size: inherit;
}

.pk-lightbox-stage {
    --pk-unzoom: 1;
    --pk-handle-scale: 1;
    grid-area: stage;
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: clamp(var(--gap-lg), 3vw, 40px);
    overflow: hidden;
    background: var(--pk-stage);
    touch-action: none;
}

.pk-lightbox-stage > img,
.pk-lb-player {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: scale-down;
    transition: opacity var(--speed);
}

.pk-lightbox-stage > .pk-lb-played {
    visibility: hidden;
}

.pk-lb-zoom-anim {
    transition: opacity var(--speed), transform var(--speed);
}

.pk-lb-zoomed .pk-lightbox-stage > img,
.pk-lb-zoomed .pk-lb-player,
.pk-lb-zoomed .pk-editor-watch,
.pk-lightbox.pk-lb-pan-ready .pk-editor-canvas-wrap,
.pk-lightbox.pk-lb-pan-ready .pk-handle {
    cursor: grab;
}

.pk-lb-panning .pk-lightbox-stage > img,
.pk-lb-panning .pk-lb-player,
.pk-lb-panning .pk-editor-watch,
.pk-lightbox.pk-lb-panning .pk-editor-canvas-wrap,
.pk-lightbox.pk-lb-panning .pk-handle {
    cursor: grabbing;
}

.pk-lightbox-wait {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed);
}

.pk-lightbox.pk-lb-waiting .pk-lightbox-wait,
.pk-lightbox.pk-lb-removing .pk-lightbox-wait {
    opacity: 1;
}

.pk-lightbox.pk-lb-removing .pk-lightbox-wait {
    transition-delay: 0.4s;
}

.pk-lightbox.pk-lb-waiting .pk-lightbox-stage > img,
.pk-lightbox.pk-lb-waiting .pk-lb-player,
.pk-lightbox.pk-lb-waiting .pk-editor-canvas-wrap {
    opacity: 0.4;
}

.pk-lightbox.pk-lb-removing .pk-lightbox-stage > img,
.pk-lightbox.pk-lb-removing .pk-lb-player,
.pk-lightbox.pk-lb-removing .pk-editor-canvas-wrap {
    opacity: 0.35;
    filter: grayscale(1);
    transition: opacity var(--speed), filter var(--speed);
}

.pk-lb-board.pk-lb-removing .pk-editor-canvas-wrap,
.pk-lb-board.pk-lb-removing .pk-lightbox-wait {
    visibility: hidden;
}

.pk-editor-canvas-wrap {
    grid-area: 1 / 1;
    place-self: center;
    position: relative;
    overflow: visible;
    transition: opacity var(--speed);
}

#pk-editor-canvas {
    position: relative;
    display: block;
    box-shadow: 0 2px 24px rgb(0 0 0 / 0.5);
}

.pk-editor-canvas-wrap[data-mode="view"] #pk-editor-canvas {
    cursor: default;
}

.pk-editor-board {
    --pk-board-gap: var(--gap-xl);
    --pk-board-caption: 24px;
    grid-area: 1 / 1;
    place-self: center;
    position: relative;
}

.pk-board-tiles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pk-board-tile {
    position: absolute;
    transition: opacity var(--pk-t-out) var(--pk-ease-out);
}

.pk-board-stills .pk-board-described {
    opacity: 0.5;
}

.pk-board-tile > img,
.pk-board-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 24px rgb(0 0 0 / 0.5);
}

.pk-board-tile:not(.pk-board-live) > .pk-board-preview,
.pk-board-tile.pk-board-live > img {
    visibility: hidden;
}

.pk-board-caption {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--gap-sm);
    width: calc(100% / var(--pk-unzoom));
    height: var(--pk-board-caption);
    margin: 0;
    padding-bottom: 6px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 18px;
    white-space: nowrap;
    transform: scale(var(--pk-unzoom));
    transform-origin: 0 100%;
}

.pk-board-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
}

.pk-board-size {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.pk-board-narrow .pk-board-size,
.pk-board-bare .pk-board-caption {
    display: none;
}

.pk-editor-board > .pk-editor-canvas-wrap {
    position: absolute;
}

.pk-lb-board #pk-editor-canvas {
    box-shadow: none;
}

.pk-lb-board .pk-lightbox-stage > img,
.pk-lb-board .pk-lb-player,
.pk-lb-board .pk-editor-watch {
    display: none;
}

.pk-board-marking .pk-board-tile:not(.pk-board-described) {
    cursor: crosshair;
}

.pk-lightbox.pk-lb-pan-ready .pk-board-tile,
.pk-lightbox.pk-lb-pan-ready #pk-editor-canvas {
    cursor: grab;
}

.pk-lightbox.pk-lb-panning .pk-board-tile,
.pk-lightbox.pk-lb-panning #pk-editor-canvas {
    cursor: grabbing;
}

.pk-editor-marks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pk-marks-area {
    opacity: 0.5;
}

.pk-editor-canvas-wrap.pk-marking {
    cursor: none;
}

.pk-brush-cursor {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.9);
    pointer-events: none;
}

.pk-expand-frame {
    position: absolute;
    box-shadow: 0 2px 24px rgb(0 0 0 / 0.5);
    pointer-events: none;
}

.pk-expand-frame,
#pk-editor-canvas,
.pk-board-preview,
.pk-alpha > img {
    background-color: #2a2a2a;
    background-image: linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%), linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
}

.pk-text-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.pk-layer-box,
.pk-layer-outline {
    position: absolute;
    box-shadow: 0 0 0 calc(1px * var(--pk-handle-scale)) var(--pk-blue);
    pointer-events: none;
}

.pk-layer-outline {
    opacity: 0.6;
}

.pk-layer-box.pk-layer-locked,
.pk-layer-outline.pk-layer-locked {
    box-shadow: 0 0 0 calc(1px * var(--pk-handle-scale)) var(--muted);
}

.pk-handle {
    position: absolute;
    width: var(--pk-handle);
    height: var(--pk-handle);
    margin: calc(var(--pk-handle) / -2);
    transform: scale(var(--pk-handle-scale));
    touch-action: none;
    pointer-events: auto;
}

.pk-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--pk-blue), 0 1px 3px rgb(0 0 0 / 0.35);
}

.pk-handle[data-handle="nw"],
.pk-handle[data-handle="n"],
.pk-handle[data-handle="ne"] {
    top: 0;
}

.pk-handle[data-handle="sw"],
.pk-handle[data-handle="s"],
.pk-handle[data-handle="se"] {
    top: 100%;
}

.pk-handle[data-handle="w"],
.pk-handle[data-handle="e"] {
    top: 50%;
}

.pk-handle[data-handle="nw"],
.pk-handle[data-handle="w"],
.pk-handle[data-handle="sw"] {
    left: 0;
}

.pk-handle[data-handle="ne"],
.pk-handle[data-handle="e"],
.pk-handle[data-handle="se"] {
    left: 100%;
}

.pk-handle[data-handle="n"],
.pk-handle[data-handle="s"] {
    left: 50%;
}

.pk-rotate-zone {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px;
    transform: scale(var(--pk-handle-scale));
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66L20 8.5' stroke='white' stroke-width='4'/%3E%3Cpath d='M20 3.5v5h-5' stroke='white' stroke-width='4'/%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66L20 8.5' stroke='black' stroke-width='2'/%3E%3Cpath d='M20 3.5v5h-5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 12 12, alias;
    pointer-events: auto;
}

.pk-rotate-zone[data-rotate="nw"] {
    top: -14px;
    left: -14px;
}

.pk-rotate-zone[data-rotate="ne"] {
    top: -14px;
    left: calc(100% + 14px);
}

.pk-rotate-zone[data-rotate="se"] {
    top: calc(100% + 14px);
    left: calc(100% + 14px);
}

.pk-rotate-zone[data-rotate="sw"] {
    top: calc(100% + 14px);
    left: -14px;
}

.pk-rotate-handle {
    position: absolute;
    top: 100%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pk-handle);
    height: var(--pk-handle);
    margin: 12px 0 0 calc(var(--pk-handle) / -2);
    transform: scale(var(--pk-handle-scale));
    transform-origin: 50% 0;
    color: #1c1c1e;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
}

.pk-rotate-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}

.pk-rotate-handle svg {
    position: relative;
}

.pk-layer-compact .pk-rotate-zone {
    display: none;
}

@media (pointer: coarse) {
    .pk-rotate-zone {
        display: none;
    }
}

.pk-text-editor {
    position: absolute;
    transform-origin: 0 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: none;
    border: 0;
    border-radius: 0;
    outline: none;
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
}

.pk-text-editor:focus {
    border: 0;
}

.pk-text-editor::selection {
    background: var(--pk-selection-fill);
    color: var(--pk-selection-ink);
}

.pk-snap-guide {
    position: absolute;
    background: var(--pk-guide);
    pointer-events: none;
}

.pk-snap-guide[data-axis="x"] {
    top: 0;
    bottom: 0;
    width: calc(1px * var(--pk-handle-scale));
    margin-left: calc(-0.5px * var(--pk-handle-scale));
}

.pk-snap-guide[data-axis="y"] {
    right: 0;
    left: 0;
    height: calc(1px * var(--pk-handle-scale));
    margin-top: calc(-0.5px * var(--pk-handle-scale));
}

.pk-crop-shade,
.pk-safe-zone {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
}

.pk-crop-shade > span,
.pk-safe-zone > span {
    position: absolute;
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.55);
    transition: box-shadow var(--speed);
}

.pk-safe-zone > span {
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.3);
}

.pk-crop-dragging .pk-crop-shade > span {
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.35);
}

.pk-crop-box {
    position: absolute;
    box-shadow: inset 0 0 0 calc(1px * var(--pk-handle-scale)) rgb(255 255 255 / 0.7);
    cursor: move;
    touch-action: none;
}

.pk-crop-box.pk-frame-fixed {
    cursor: default;
}

.pk-crop-grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    background-image: linear-gradient(90deg, transparent calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(100% / 3 + 0.5px), transparent calc(100% / 3 + 0.5px), transparent calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(200% / 3 + 0.5px), transparent calc(200% / 3 + 0.5px)), linear-gradient(180deg, transparent calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(100% / 3 + 0.5px), transparent calc(100% / 3 + 0.5px), transparent calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.45) calc(200% / 3 + 0.5px), transparent calc(200% / 3 + 0.5px));
    pointer-events: none;
}

.pk-crop-dragging .pk-crop-grid {
    display: block;
}

.pk-crop-box .pk-handle::after {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.pk-crop-box .pk-handle[data-handle="nw"]::after {
    margin: -1.5px 0 0 -1.5px;
    box-shadow: inset 3px 3px 0 #ffffff;
}

.pk-crop-box .pk-handle[data-handle="ne"]::after {
    margin: -1.5px 0 0 -16.5px;
    box-shadow: inset -3px 3px 0 #ffffff;
}

.pk-crop-box .pk-handle[data-handle="se"]::after {
    margin: -16.5px 0 0 -16.5px;
    box-shadow: inset -3px -3px 0 #ffffff;
}

.pk-crop-box .pk-handle[data-handle="sw"]::after {
    margin: -16.5px 0 0 -1.5px;
    box-shadow: inset 3px -3px 0 #ffffff;
}

.pk-crop-box .pk-handle[data-handle="n"]::after,
.pk-crop-box .pk-handle[data-handle="s"]::after {
    height: 3px;
    margin-top: -1.5px;
    background: #ffffff;
}

.pk-crop-box .pk-handle[data-handle="w"]::after,
.pk-crop-box .pk-handle[data-handle="e"]::after {
    width: 3px;
    margin-left: -1.5px;
    background: #ffffff;
}

.pk-crop-box .pk-handle[data-handle="n"],
.pk-crop-box .pk-handle[data-handle="s"] {
    cursor: ns-resize;
}

.pk-crop-box .pk-handle[data-handle="w"],
.pk-crop-box .pk-handle[data-handle="e"] {
    cursor: ew-resize;
}

.pk-crop-box .pk-handle[data-handle="nw"],
.pk-crop-box .pk-handle[data-handle="se"] {
    cursor: nwse-resize;
}

.pk-crop-box .pk-handle[data-handle="ne"],
.pk-crop-box .pk-handle[data-handle="sw"] {
    cursor: nesw-resize;
}

.pk-crop-compact .pk-handle[data-handle="n"],
.pk-crop-compact .pk-handle[data-handle="e"],
.pk-crop-compact .pk-handle[data-handle="s"],
.pk-crop-compact .pk-handle[data-handle="w"] {
    display: none;
}

.pk-editor-hud {
    position: absolute;
    z-index: 20;
    padding: 3px var(--gap-sm);
    background: rgb(0 0 0 / 0.78);
    color: #ffffff;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading);
    white-space: nowrap;
    border-radius: var(--radius-2xs);
    pointer-events: none;
}

.pk-model-summary .pk-chip-level {
    flex: none;
    color: var(--pk-faint);
    font-size: var(--text-small);
}

.pk-editor-drop {
    position: absolute;
    top: var(--gap-md);
    right: var(--gap-md);
    bottom: var(--gap-md);
    left: var(--gap-md);
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--pk-blue-rgb), 0.14);
    outline: 2px dashed var(--pk-blue);
    outline-offset: -2px;
    border-radius: var(--radius);
    pointer-events: none;
}

.pk-editor-drop > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-lg) var(--gap-xl);
    background: var(--raised);
    color: var(--ink);
    font-size: var(--text-lead);
    font-weight: 600;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.pk-editor-drop svg {
    color: var(--pk-blue);
}

.pk-editor-drop.pk-editor-drop-blocked {
    background: rgb(0 0 0 / 0.35);
    outline-color: var(--muted);
}

.pk-editor-drop.pk-editor-drop-blocked svg {
    color: var(--muted);
}

.pk-filmstrip {
    --pk-version: 52px;
    grid-area: versions;
    position: relative;
    min-width: 0;
}

.pk-editor-versions {
    display: flex;
    gap: var(--gap-sm);
    padding: 0 var(--gap-lg) var(--gap-lg);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background: var(--pk-stage);
    scrollbar-width: none;
}

.pk-side-fade {
    --pk-fade-axis: to right;

    -webkit-mask-image: linear-gradient(var(--pk-fade-axis), transparent, #000 var(--pk-fade-start), #000 calc(100% - var(--pk-fade-end)), transparent);
    mask-image: linear-gradient(var(--pk-fade-axis), transparent, #000 var(--pk-fade-start), #000 calc(100% - var(--pk-fade-end)), transparent);
}

.pk-strip-paddle {
    position: absolute;
    top: 4px;
    z-index: 1;
    width: 44px;
    height: var(--pk-version);
    padding: 0;
    background: none;
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--pk-t-out) var(--pk-ease-out), visibility 0s var(--pk-t-out);
}

.pk-strip-paddle[data-step="-1"] {
    left: 0;
}

.pk-strip-paddle[data-step="1"] {
    right: 0;
}

.pk-strip-paddle:hover {
    background: none;
}

.pk-strip-paddle > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bg);
    border-radius: 50%;
    box-shadow: var(--pk-edge);
    transition: background-color var(--pk-t-out) var(--pk-ease-out);
}

.pk-strip-paddle:hover > span {
    background: var(--raised);
    transition-duration: var(--pk-t-in);
}

.pk-strip-paddle:active > span {
    box-shadow: var(--pk-recess);
    transition-duration: 0s;
}

@media (hover: hover) {
    body:not(.pk-marquee-active) .pk-filmstrip:hover .pk-editor-versions:not(.pk-reordering) ~ .pk-strip-paddle:not(.pk-spent) {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--pk-t-in) var(--pk-ease-out), visibility 0s;
    }
}

.pk-editor-versions::-webkit-scrollbar {
    display: none;
}

.pk-editor-versions > :first-child {
    margin-left: auto;
}

.pk-editor-versions > :last-child {
    margin-right: auto;
}

.pk-version {
    position: relative;
    flex: 0 0 auto;
    width: var(--pk-version);
    height: var(--pk-version);
    margin: 4px 0;
    overflow: hidden;
    background: var(--bg);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px var(--pk-stage), 0 0 0 3px transparent;
    cursor: pointer;
    transition: box-shadow var(--pk-t-out) var(--pk-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.pk-version:hover {
    box-shadow: 0 0 0 2px var(--pk-stage), 0 0 0 3px var(--tint);
}

:not([data-menu-single]) > .pk-version.active,
.pk-version[data-menu-target] {
    box-shadow: 0 0 0 2px var(--pk-stage), 0 0 0 4px var(--pk-blue);
}

.pk-version .pk-select-check {
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
}

.pk-version.selected .pk-select-check::after {
    font-size: 11px;
}

.pk-versions-picking .pk-version:not(.selected) > :not(.pk-select-check),
.pk-version-pick-tile:not(.selected) > img {
    opacity: 0.5;
    transition: opacity var(--pk-t-out) var(--pk-ease-out);
}

.pk-versions-picking .pk-version:not(.selected):hover > :not(.pk-select-check),
.pk-version-pick-tile:not(.selected):hover > img {
    opacity: 0.75;
    transition-duration: var(--pk-t-in);
}

.pk-version-pick-tile[aria-disabled="true"]:not(.selected) {
    cursor: default;
}

.pk-version-pick-tile[aria-disabled="true"]:not(.selected) > img {
    opacity: 0.25;
}

.pk-version-pick-tile[aria-disabled="true"]:not(.selected) .pk-select-check {
    opacity: 0;
}

.pk-version > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-version .pk-pending {
    box-shadow: none;
}

.pk-version .pk-pending-label,
[data-compact-thumbnails] .pk-tile .pk-pending-label {
    display: none;
}

.pk-pending-ring {
    display: none;
}

.pk-version .pk-pending-ring,
[data-compact-thumbnails] .pk-tile .pk-pending-ring {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0.32);
    color: var(--ink);
}

.pk-pending-ring svg {
    stroke-width: 2.5;
    animation: spin 0.8s linear infinite;
}

.pk-pending-ring circle:first-child {
    opacity: 0;
}

.pk-pending-ring circle + circle {
    stroke-dasharray: 45.24 11.31;
}

.pk-pending-timed .pk-pending-ring svg {
    transform: rotate(-90deg);
    animation: none;
}

.pk-pending-timed .pk-pending-ring circle:first-child {
    opacity: 0.24;
}

.pk-pending-timed .pk-pending-ring circle + circle {
    stroke-dasharray: 56.55;
    animation: pk-ring-fill var(--pk-eta) linear var(--pk-elapsed) both;
}

@keyframes pk-ring-fill {
    from {
        stroke-dashoffset: 56.55;
    }
}

.pk-version-failed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--danger);
}

.pk-editor-inspector {
    position: relative;
    grid-area: inspector;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
}

.pk-editor-segment {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    padding: 2px;
    background: var(--fill);
    border-radius: var(--radius-xs);
    box-shadow: var(--pk-recess);
}

.pk-editor-segment > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    min-width: 0;
    min-height: 0;
    height: calc(var(--pk-row) - 4px);
    padding: 0 var(--gap-sm);
    background: none;
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-2xs);
    box-shadow: none;
}

.pk-editor-segment > button:hover {
    background: none;
    color: var(--ink);
}

.pk-editor-segment > button:active {
    background: rgba(255, 255, 255, 0.08);
}

.pk-editor-segment > button[aria-checked="true"],
.pk-editor-segment > button[aria-pressed="true"] {
    background: var(--pk-thumb);
    color: var(--ink);
    box-shadow: var(--pk-edge);
}

.pk-editor-segment > button[aria-pressed="mixed"] {
    color: var(--ink);
}

.pk-editor-segment > button:focus {
    outline-offset: -2px;
}

.pk-editor-state {
    flex: 1 1 auto;
    display: grid;
    align-content: start;
    gap: var(--gap-sm);
    min-height: 0;
    padding: var(--gap-xl) var(--gap-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pk-editor-state p {
    margin: 0;
    color: var(--muted);
}

.pk-editor-state-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-lead);
    font-weight: 600;
}

.pk-editor-state .pk-prompt-quote {
    margin-bottom: var(--gap-sm);
    color: var(--ink);
    font-size: var(--text-lead);
}

.pk-editor-state .pk-reading {
    padding-left: 0;
    text-indent: 0;
    background: linear-gradient(90deg, var(--muted) 35%, var(--ink) 50%, var(--muted) 65%) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pk-reading-sweep 2.4s linear infinite;
}

.pk-editor-state .pk-reading::before,
.pk-editor-state .pk-reading::after {
    content: none;
}

.pk-editor-state .pk-revealed {
    animation: pk-reveal 0.7s ease-out both;
}

@keyframes pk-reading-sweep {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes pk-reveal {
    from {
        opacity: 0;
        filter: blur(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-editor-state .pk-reading {
        background: none;
        color: var(--muted);
        -webkit-text-fill-color: currentColor;
        animation: none;
    }

    .pk-editor-state .pk-revealed {
        animation: none;
    }
}

.pk-editor-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--gap-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pk-editor-pane {
    display: grid;
    gap: var(--gap-xl);
    min-width: 0;
}

#pk-pane-ai,
#pk-pane-adjust {
    gap: var(--gap-lg);
}

.pk-editor-group {
    display: grid;
    gap: var(--gap-md);
    min-width: 0;
}

.pk-editor-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    min-height: 20px;
}

.pk-adjust-target {
    flex: 0 1 auto;
    max-width: 75%;
    font-weight: 600;
}

.pk-adjust-target:disabled {
    padding-left: 0;
    background: none;
    color: var(--ink);
    box-shadow: none;
    opacity: 1;
    cursor: default;
}

.pk-adjust-target:disabled svg {
    display: none;
}

.pk-editor-pane-head .button-text {
    padding: 0;
    color: var(--accent-ink);
    font-size: var(--text-small);
}

.pk-prompt-box {
    display: block;
    width: 100%;
    padding: 10px var(--gap-md);
    background: var(--fill);
    border-color: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-body);
    line-height: var(--leading);
    resize: none;
}

.pk-prompt-box:focus {
    border-color: var(--accent-ink);
}

#pk-editor-ai-prompt {
    min-height: 92px;
    max-height: 240px;
}

.pk-editor-targets {
    display: grid;
    flex: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--gap-sm);
    margin: var(--gap-lg) var(--gap-lg) 0;
}

.pk-editor-ratios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-sm);
}

.pk-editor-target,
.pk-editor-ratio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 56px;
    padding: 0 var(--gap-xs);
    background: var(--pk-raised);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-xs);
    box-shadow: var(--pk-edge);
}

.pk-editor-target:hover,
.pk-editor-ratio:hover {
    background: var(--pk-raised-hover);
    color: var(--ink);
    transition-duration: var(--pk-t-in);
}

.pk-editor-target:active,
.pk-editor-ratio:active {
    background: var(--fill);
    box-shadow: var(--pk-recess);
    transition-duration: 0s;
}

.pk-editor-target[aria-pressed="true"],
.pk-editor-ratio[aria-pressed="true"] {
    background: var(--pk-selected);
    color: var(--accent-ink);
    box-shadow: var(--pk-edge-selected);
}

.pk-editor-target span,
.pk-editor-ratio span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-editor-ratio {
    display: grid;
    grid-template-rows: 15px auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
}

.pk-editor-ratio span:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}

.pk-resize-size {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--gap-sm);
}

.pk-resize-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    height: var(--pk-row);
    margin: 0;
    padding-left: var(--gap-md);
    background: var(--fill);
    border-radius: var(--radius-xs);
    box-shadow: var(--pk-edge);
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: text;
}

.pk-resize-field:focus-within {
    box-shadow: inset 0 0 0 1px var(--accent-ink);
}

.pk-resize-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 var(--gap-sm);
    background: none;
    border-color: transparent;
    color: var(--ink);
    font-size: var(--text-body);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pk-resize-field input:focus {
    border-color: transparent;
}

.pk-resize-field input::-webkit-outer-spin-button,
.pk-resize-field input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.pk-editor-field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--gap-md);
    min-width: 0;
    isolation: isolate;
}

.pk-editor-field label {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 400;
}

.pk-editor-field output,
.pk-editor-inline-range output {
    min-width: 5ch;
    color: var(--muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pk-editor-field output.pk-changed {
    color: var(--ink);
}

.pk-editor-field .pk-range {
    grid-column: 1 / -1;
}

.pk-editor-field[data-adjust]::after {
    content: '';
    position: absolute;
    bottom: 7px;
    left: calc(50% - 1px);
    z-index: -1;
    width: 2px;
    height: 10px;
    background: var(--tint);
    border-radius: 1px;
}

.pk-range {
    --pk-from: 0%;
    --pk-to: 0%;
    display: block;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pk-range::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(90deg, var(--tint) var(--pk-from), var(--pk-blue) var(--pk-from), var(--pk-blue) var(--pk-to), var(--tint) var(--pk-to));
    border-radius: 2px;
}

.pk-range::-moz-range-track {
    height: 4px;
    background: linear-gradient(90deg, var(--tint) var(--pk-from), var(--pk-blue) var(--pk-from), var(--pk-blue) var(--pk-to), var(--tint) var(--pk-to));
    border-radius: 2px;
}

.pk-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
    -webkit-appearance: none;
    appearance: none;
}

.pk-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
}

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

.pk-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--accent-ink);
}

.pk-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--accent-ink);
}

.pk-range:disabled {
    opacity: 0.4;
}

.pk-editor-swatches {
    display: flex;
    gap: var(--gap-xs);
}

.pk-editor-swatch {
    flex: 0 1 var(--pk-row);
    min-width: 0;
    min-height: 0;
    height: var(--pk-row);
    padding: 0;
    background: none;
}

.pk-editor-swatch:hover {
    background: none;
}

.pk-editor-swatch::before {
    content: '';
    flex: none;
    width: 28px;
    height: 28px;
    background: var(--pk-swatch);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
    transition: box-shadow var(--pk-t-out) var(--pk-ease-out);
}

.pk-editor-swatch[aria-checked="true"]::before {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
}

.pk-editor-buttons {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--gap-sm);
}

.pk-editor-pair {
    grid-template-columns: auto minmax(0, 1fr);
}

.pk-editor-pair .pk-editor-action {
    white-space: nowrap;
}

.pk-editor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: var(--pk-row);
    padding: 0 var(--gap-md);
    background: var(--pk-raised);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-xs);
    box-shadow: var(--pk-edge);
}

.pk-editor-button:hover {
    background: var(--pk-raised-hover);
    color: var(--ink);
    transition-duration: var(--pk-t-in);
}

.pk-editor-button:active {
    background: var(--fill);
    box-shadow: var(--pk-recess);
    transition-duration: 0s;
}

.pk-editor-button[aria-pressed="true"],
.pk-editor-button[aria-checked="true"] {
    background: var(--pk-selected);
    color: var(--accent-ink);
    box-shadow: var(--pk-edge-selected);
}

.pk-editor-icons .pk-editor-button {
    padding: 0;
}

.pk-layer-adds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
}

.pk-editor-note {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading);
}

.pk-targets-note {
    flex: none;
    margin: var(--gap-md) var(--gap-lg) 0;
}

.pk-layer-list {
    display: grid;
    gap: 2px;
    margin: 0 calc(-1 * var(--gap-sm));
}

.pk-layer-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--gap-sm);
    min-height: 40px;
    padding: 0 var(--gap-xs) 0 var(--gap-sm);
    border-radius: var(--radius-sm);
}

.pk-layer-row:hover {
    background: var(--fill);
}

.pk-layer-row.active {
    background: var(--pk-accent-fill);
}

.pk-layer-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    background: var(--fill);
    color: var(--muted);
    border-radius: var(--radius-2xs);
}

.pk-layer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-layer-art svg {
    filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.55));
}

.pk-layer-missing {
    color: var(--danger);
}

.pk-layer-missing svg {
    width: 16px;
    height: 16px;
    filter: none;
}

.pk-layer-select {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    height: 40px;
    padding: 0;
    background: none;
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 400;
    text-align: left;
}

.pk-layer-select:hover {
    background: none;
    color: var(--ink);
}

.pk-layer-select > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-layer-select > .pk-layer-count {
    flex-shrink: 0;
    margin-left: var(--gap-sm);
    color: var(--pk-faint);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.pk-layer-toggle {
    width: 28px;
    height: 28px;
}

.pk-layer-hidden .pk-layer-thumb,
.pk-layer-hidden .pk-layer-select {
    opacity: 0.45;
}

@media (hover: hover) {
    .pk-layer-row:not(:hover) .pk-layer-toggle[aria-pressed="false"],
    .pk-layer-row:not(:hover) .pk-layer-more {
        opacity: 0;
    }

    .pk-layer-row:not(:hover) .pk-layer-toggle:focus-visible {
        opacity: 1;
    }
}

.pk-editor-props {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-sm) var(--gap-md);
    min-width: 0;
}

.pk-editor-prop {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 400;
}

.pk-editor-selects {
    display: flex;
    gap: var(--gap-sm);
}

#pk-editor-model {
    flex: 1 1 auto;
}

#pk-editor-size {
    flex: none;
}

.pk-editor-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    min-width: 0;
    height: var(--pk-row);
    padding: 0 var(--gap-sm) 0 var(--gap-md);
    background: var(--pk-raised);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 400;
    border-radius: var(--radius-xs);
    box-shadow: var(--pk-edge);
}

.pk-editor-select:hover,
.pk-editor-select[aria-expanded="true"] {
    background: var(--pk-raised-hover);
    color: var(--ink);
}

.pk-editor-select:active {
    background: var(--fill);
    box-shadow: var(--pk-recess);
}

.pk-editor-select > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-editor-select svg {
    flex-shrink: 0;
    color: var(--muted);
}

.pk-editor-stepper {
    display: grid;
    grid-template-columns: var(--pk-row) minmax(0, 1fr) var(--pk-row);
    align-items: center;
    height: var(--pk-row);
    background: var(--fill);
    border-radius: var(--radius-sm);
}

.pk-editor-stepper .icon-button {
    width: var(--pk-row);
    height: var(--pk-row);
}

.pk-editor-stepper input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: none;
    border-color: transparent;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pk-editor-stepper input::-webkit-outer-spin-button,
.pk-editor-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.pk-editor-inline-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: var(--gap-sm);
}

.pk-editor-props .switch {
    justify-self: start;
}

.switch.pk-mixed::after {
    transform: translateX(0.5625rem);
    background-image: linear-gradient(var(--bg), var(--bg));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.5rem 2px;
}

.pk-editor-fill {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.pk-color {
    flex-shrink: 0;
    justify-self: start;
    width: var(--pk-row);
    height: var(--pk-row);
    padding: 4px;
    background: var(--fill);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--speed);
}

.pk-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.pk-color::-webkit-color-swatch {
    border: 0;
    border-radius: var(--radius-2xs);
}

.pk-color::-moz-color-swatch {
    border: 0;
    border-radius: var(--radius-2xs);
}

.pk-color.pk-mixed::-webkit-color-swatch {
    background-image: var(--pk-mixed);
}

.pk-color.pk-mixed::-moz-color-swatch {
    background-image: var(--pk-mixed);
}

.pk-editor-message {
    flex: none;
    margin: 0;
    padding: 0 var(--gap-lg) var(--gap-sm);
    color: var(--danger);
    font-size: var(--text-small);
    line-height: var(--leading);
    overflow-wrap: break-word;
}

#pk-editor-error:empty {
    display: none;
}

.pk-editor-footer {
    flex: none;
    display: grid;
    gap: var(--gap-md);
    padding: var(--gap-md) var(--gap-lg) var(--gap-lg);
    background: var(--bg);
}

.pk-editor-dock {
    display: contents;
}

.pk-editor-action {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--gap-lg);
    font-size: var(--text-body);
}

.pk-editor-action:disabled,
#pk-generate-btn:disabled {
    background: var(--fill);
    color: var(--muted);
    box-shadow: none;
    opacity: 1;
}

@media (pointer: coarse) {
    .pk-editor-action {
        min-height: 48px;
    }
}

@media (max-width: 1023px) and (max-aspect-ratio: 4/3) {
    .pk-lightbox {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "top" "stage" "versions" "inspector";
    }

    .pk-lightbox-stage {
        padding: var(--gap-lg);
    }

    .pk-editor-versions {
        padding-bottom: var(--gap-md);
    }

    .pk-editor-board {
        --pk-board-gap: var(--gap-lg);
    }

    .pk-editor-inspector {
        height: max(calc(var(--pk-editor-height) * 0.46), min(calc(428px + env(safe-area-inset-bottom)), calc(var(--pk-editor-height) * 0.58)));
    }

    .pk-editor-scroll {
        padding: var(--gap-md) var(--gap-lg) var(--gap-sm);
    }

    .pk-editor-targets {
        order: 1;
        gap: 0;
        margin: 0;
        padding: 0 var(--gap-sm) env(safe-area-inset-bottom);
    }

    .pk-editor-target,
    .pk-editor-target:hover,
    .pk-editor-target:active,
    .pk-editor-target[aria-pressed="true"] {
        gap: 2px;
        height: 56px;
        background: none;
        font-size: 11px;
        box-shadow: none;
    }

    .pk-editor-target:hover {
        color: var(--muted);
    }

    .pk-editor-target[aria-pressed="true"] {
        color: var(--accent-ink);
    }

    .pk-prompt-only .pk-editor-scroll {
        display: none;
    }

    .pk-prompt-only .pk-editor-footer {
        flex: 1 1 auto;
        grid-template-rows: minmax(0, 1fr);
    }

    .pk-prompt-only #pk-editor-ai-prompt {
        min-height: 100%;
        max-height: 100%;
    }

    .pk-lightbox.pk-typing .pk-editor-targets,
    .pk-lightbox.pk-typing .pk-editor-versions {
        display: none;
    }

    .pk-editor-footer {
        gap: var(--gap-sm);
        padding: var(--gap-sm) var(--gap-lg) var(--gap-md);
    }

    #pk-editor-ai-prompt {
        min-height: 44px;
    }

    #pk-pane-ai {
        gap: var(--gap-md);
    }

    #pk-pane-ai .pk-editor-group {
        gap: var(--gap-sm);
    }

    #pk-markup-tools,
    #pk-resize-tools {
        align-items: center;
    }

    #pk-markup-tools {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #pk-resize-tools {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    #pk-resize-size {
        grid-column: 1 / 3;
    }

    #pk-resize-size[hidden] + #pk-resize-turns {
        grid-column: 1 / -1;
    }

    #pk-resize-note {
        grid-column: 1 / -1;
    }

    #pk-markup-tools .pk-editor-field {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    #pk-markup-tools .pk-range {
        grid-row: 1;
        grid-column: 2;
    }

    #pk-markup-size-value {
        grid-column: 3;
    }

    #pk-markup-tools .pk-editor-buttons {
        grid-auto-columns: var(--pk-row);
        gap: var(--gap-xs);
    }

    #pk-markup-tools .pk-editor-button {
        gap: 0;
        padding: 0;
        font-size: 0;
    }

    #pk-resize-turns {
        grid-auto-columns: 40px;
        gap: var(--gap-xs);
    }

    .pk-resize-field {
        padding-left: var(--gap-sm);
    }

    .pk-resize-field input {
        padding: 0 var(--gap-xs);
    }

    #pk-resize-shapes {
        grid-column: 2 / -1;
        display: flex;
        gap: var(--gap-sm);
        margin: calc(-1 * var(--gap-xs)) calc(-1 * var(--gap-lg)) calc(-1 * var(--gap-xs)) 0;
        padding: var(--gap-xs) var(--gap-lg) var(--gap-xs) var(--gap-xs);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    #pk-resize-shapes::-webkit-scrollbar {
        display: none;
    }

    .pk-editor-ratio {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        height: var(--pk-row);
        padding: 0 var(--gap-md);
        font-size: var(--text-small);
        border-radius: var(--radius-xs);
    }

    .pk-editor-ratio span:last-child {
        display: inline;
        white-space: nowrap;
    }

    .pk-editing > .status-toast {
        top: calc(var(--pk-bar) + env(safe-area-inset-top) + var(--gap-sm));
        bottom: auto;
    }
}

@media (max-width: 480px) {
    #pk-resize-turns [data-turn="1"],
    #pk-resize-turns [data-mirror="y"] {
        display: none;
    }

    .pk-editor-top {
        gap: var(--gap-sm);
    }

    .pk-editor-status {
        margin: 0 var(--gap-xs);
    }
}

@media (max-height: 480px) {
    :root {
        --pk-bar: 44px;
    }

    .pk-lightbox-stage {
        padding: var(--gap-sm);
    }
}

.pk-style-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

#pk-style-prompt {
    overflow: hidden;
}

.pk-account .modal-inner {
    height: min(44rem, 100%);
}

.pk-account-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

.pk-account-nav {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--gap-xs);
    width: 13.5rem;
    padding: var(--gap-lg) var(--gap-sm);
    background: var(--fill);
}

.pk-account-links {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-top: auto;
}

.pk-account-links a {
    text-decoration: none;
}

.pk-account-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.pk-account-page .modal-body {
    padding-top: var(--gap-xl);
}

.pk-account-page .modal-body [id] {
    scroll-margin-top: var(--gap-md);
}

#profile-form > .grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
}

@media (max-width: 1024px) {
    .pk-account-layout {
        flex-direction: column;
    }

    .pk-account-nav {
        flex-direction: row;
        width: auto;
        margin-right: calc(var(--gap-lg) + var(--control) + var(--gap-sm));
        padding: var(--gap-lg) var(--gap-xs) var(--gap-xs) var(--gap-lg);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        background: none;
        scrollbar-width: none;
    }

    .pk-account-nav::-webkit-scrollbar {
        display: none;
    }

    .pk-account-nav .pk-nav-item {
        flex: none;
        width: auto;
    }

    .pk-account-links {
        display: none;
    }

    .pk-account-page .modal-header {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .pk-account-nav .pk-nav-item > svg {
        display: none;
    }
}

.pk-billing-balance {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    padding-bottom: var(--gap-md);
}

@media (max-width: 480px) {
    .pk-billing-balance {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

.pk-billing-balance-value {
    font-size: var(--pk-display-xl);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}

.pk-billing-balance-unit {
    font-size: var(--text-lead);
    color: var(--muted);
}

.pk-account-heading,
.pk-account .prose h2 {
    font-size: var(--text-lead);
    font-weight: 600;
    margin-top: var(--gap-2xl);
    margin-bottom: var(--gap-md);
}

.modal-body > .pk-account-heading:first-child {
    margin-top: 0;
}

.pk-account .prose h3 {
    margin-top: var(--gap-xl);
    margin-bottom: var(--gap-sm);
    font-size: var(--text-body);
}

.pk-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--gap-md);
}

.pk-pack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: var(--gap-lg);
    background: var(--fill);
    border-radius: var(--radius);
    overflow-wrap: break-word;
}

.pk-pack .button {
    margin-top: auto;
    width: 100%;
}

#offer-sheet .input {
    height: auto;
    padding: var(--gap-md);
    font-size: var(--text-lead);
}

#offer-sheet .button {
    padding: var(--gap-md) var(--gap-xl);
    font-size: var(--text-lead);
}

.pk-pack-name {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--ink);
}

.pk-pack-amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: var(--gap-sm);
    font-variant-numeric: tabular-nums;
}

.pk-pack-amount span {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--muted);
}

.pk-pack-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--gap-md);
    margin-bottom: var(--gap-lg);
    font-size: var(--text-body);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.pk-pack-price em {
    font-style: normal;
    font-size: var(--text-body);
    color: var(--muted);
}

.pk-ledger {
    background: var(--fill);
    border-radius: var(--radius);
    padding: var(--gap-xs) var(--gap-lg);
}

.pk-ledger-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 100px 110px;
    align-items: baseline;
    gap: var(--gap-lg);
    padding-top: var(--gap-md);
    padding-bottom: var(--gap-md);
    font-size: var(--text-body);
}

.pk-ledger-header {
    color: var(--muted);
}

.pk-ledger-header .pk-ledger-running {
    color: inherit;
}

.pk-ledger-running-label {
    display: none;
    color: var(--muted);
}

@media (max-width: 768px) {
    .pk-ledger-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gap-xs) var(--gap-md);
        padding-top: var(--gap-lg);
        padding-bottom: var(--gap-lg);
    }

    .pk-ledger-row .pk-ledger-label {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .pk-ledger-row .pk-ledger-running {
        text-align: end;
    }

    .pk-ledger-row .pk-ledger-date {
        grid-column: 1 / -1;
        text-align: start;
    }

    .pk-ledger-header {
        display: none;
    }

    .pk-ledger-running-label {
        display: inline;
    }
}

.pk-ledger-running {
    color: var(--ink);
    text-align: end;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}

.pk-account-note {
    margin-top: var(--gap-md);
    color: var(--muted);
    font-size: var(--text-body);
}

.pk-ledger-delta {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}

.pk-ledger-plus {
    color: var(--success);
}

.pk-ledger-label {
    color: var(--muted);
    overflow-wrap: break-word;
}

.pk-ledger-date {
    color: var(--muted);
    text-align: end;
    font-size: var(--text-body);
}

.check {
    display: inline-grid;
    margin-bottom: 0;
    font-weight: 400;
}

.pk-menu-choices {
    display: grid;
    gap: var(--gap-xl);
    font-size: var(--text-body);
}

.pk-menu-group legend {
    margin-bottom: var(--gap-md);
    font-weight: 600;
}

.pk-menu-list,
.pk-menu-family {
    display: grid;
    justify-items: start;
    gap: var(--gap-md);
}

.pk-menu-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md) var(--gap-xl);
}

.pk-menu-levels {
    padding-left: 2rem;
}

.pk-menu-options .check > span {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
}

.pk-shape-custom {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
}

.pk-shape-remove {
    width: 24px;
    height: 24px;
    font-size: var(--text-title);
}

@media (pointer: coarse) {
    .pk-shape-remove {
        width: var(--control);
        height: var(--control);
        margin: calc((24px - var(--control)) / 2) 0;
    }
}

.pk-shape-add {
    display: flex;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}

.pk-shape-add input {
    width: 8rem;
}

.pk-api-head {
    margin-bottom: var(--gap-md);
}

.pk-api-head:not(:first-child) {
    margin-top: var(--gap-2xl);
}

.pk-api-head .pk-account-heading {
    margin: 0;
}

.pk-api-keys .pk-ledger-row {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto auto;
    align-items: center;
}

.pk-api-name {
    font-weight: 600;
    overflow-wrap: break-word;
}

.pk-api-mask,
.pk-api-used {
    color: var(--muted);
}

.pk-api-mask {
    font-family: var(--font-mono);
}

.pk-api-used {
    text-align: end;
}

.pk-api-action {
    justify-self: end;
}

.pk-api-revoke {
    margin: calc(-1 * var(--gap-sm)) 0;
    padding: var(--gap-sm) 0;
    font-size: var(--text-body);
}

.pk-api-secret input[readonly] {
    min-width: 0;
    background: var(--fill);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-body);
    cursor: text;
}

@media (max-width: 768px) {
    .pk-api-keys .pk-ledger-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pk-api-keys .pk-api-action {
        grid-row: 1;
        grid-column: 2;
    }
}

.pk-dot-stage {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.pk-dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ink);
}

.pk-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    z-index: -1;
    margin: -90px 0 0 -90px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--pk-blue-rgb), 0.32), transparent);
    animation: pk-dot-breathe 7s ease-in-out infinite alternate;
}

@keyframes pk-dot-breathe {
    to {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-dot::before {
        animation: none;
    }
}

@media (max-width: 1024px) {
    .pk-studio {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
    }

    .pk-view-title {
        position: absolute;
        width: 1px;
        height: 1px;
        min-height: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .pk-gallery-head {
        justify-content: flex-start;
    }

    .pk-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-sm);
        padding: var(--gap-md) var(--gap-lg);
        background: var(--bg);
        color: var(--ink);
        font-size: var(--text-body);
        font-weight: 600;
        border-radius: var(--radius);
    }

    .pk-mobile-bar:hover {
        background: var(--tint);
    }

    .pk-mobile-bar > svg {
        flex-shrink: 0;
        transition: transform var(--speed);
    }

    .pk-mobile-bar[aria-expanded="true"] > svg {
        transform: rotate(180deg);
    }

    #pk-mobile-label {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pk-sidebar {
        display: none;
        position: absolute;
        grid-row: 2;
        grid-column: 1 / -1;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
        max-height: 70vh;
        background: var(--raised);
        box-shadow: var(--hairline), var(--pk-lift);
    }

    .pk-studio.pk-sidebar-open .pk-sidebar {
        display: flex;
    }
}

@media (max-width: 768px) {
    .pk-grid,
    .pk-cast-grid {
        --pk-grid-gap: var(--gap-md);
    }

    .pk-gallery-head {
        gap: var(--gap-sm);
    }

    .pk-gallery-head .pk-view-title {
        flex-basis: 100%;
        margin-bottom: var(--gap-sm);
    }
}

@media (pointer: coarse) {
    button,
    .button {
        min-width: 44px;
        min-height: 44px;
    }

    .pk-nav-more {
        min-width: 44px;
    }

    .pk-ref-item button,
    .pk-cast-photo > .attachment-remove,
    .pk-select-check {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .pk-version .pk-select-check {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }
}

.pk-version-pick-note {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: var(--leading);
}

.pk-version-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--gap-sm);
}

.pk-stack-start {
    grid-column-start: 1;
}

.pk-version-pick-tile {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--fill);
    border-radius: var(--radius);
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--speed);
}

.pk-version-pick-tile::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.pk-version-pick-tile img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-account-page .pk-tasks-body {
    display: flex;
    flex-direction: column;
    padding-top: var(--gap-lg);
}

.pk-tasks-body > * {
    margin-top: 0;
}

.pk-tasks-group:not([hidden]) + .pk-tasks-group {
    margin-top: var(--gap-md);
}

.pk-tasks-heading {
    position: sticky;
    top: calc(-1 * var(--gap-sm));
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 calc(-1 * var(--gap-xl));
    padding: var(--gap-sm) var(--gap-xl);
    background: var(--bg);
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 600;
    line-height: var(--leading);
}

.pk-tasks-heading h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.pk-tasks-heading h3 > span {
    color: var(--nav);
    font-variant-numeric: tabular-nums;
}

.pk-tasks-heading .pk-task-button {
    margin: -4px -10px -4px auto;
}

.pk-tasks-list {
    display: grid;
    margin: 0 calc(-1 * var(--gap-sm));
}

.pk-task {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    border-radius: var(--radius);
    transition: background-color var(--pk-t-out) var(--pk-ease-out);
}

.pk-task-main {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--gap-md);
    min-width: 0;
    padding: 6px 0 6px var(--gap-sm);
    border-radius: inherit;
}

.pk-task-main[role="button"] {
    cursor: pointer;
}

.pk-task-main:focus-visible {
    outline-offset: -2px;
}

.pk-task-figure {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    color: var(--muted);
}

.pk-task-figure > * {
    grid-area: 1 / 1;
}

.pk-task-pictured .pk-task-figure {
    background: var(--fill);
}

.pk-task-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--speed);
}

.pk-task-figure img.pk-loaded {
    opacity: 1;
}

.pk-task[data-state="queued"] .pk-task-figure img,
.pk-task[data-state="failed"] .pk-task-figure img,
.pk-task[data-state="cancelled"] .pk-task-figure img {
    filter: grayscale(1) brightness(0.4);
}

.pk-task-glyph {
    position: relative;
    display: flex;
}

.pk-task[data-state="running"] .pk-task-glyph {
    color: var(--accent-ink);
}

.pk-task[data-state="failed"] .pk-task-glyph {
    color: var(--danger);
}

.pk-task-glyph .spinner-ring {
    width: 18px;
    height: 18px;
}

.pk-task-text {
    display: grid;
    align-content: start;
    row-gap: 6px;
    min-width: 0;
    padding-top: 10px;
}

.pk-task-label {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-task[data-state="cancelled"] .pk-task-label {
    color: var(--muted);
}

.pk-task-detail {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pk-task-expanded .pk-task-label {
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pk-task-bar {
    position: relative;
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--fill);
}

.pk-task-bar > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: inherit;
    background: var(--pk-blue);
    transition: width 400ms var(--pk-ease-out), opacity var(--speed);
}

.pk-task-bar-busy > span {
    width: 35%;
    animation: pk-task-busy 1.4s ease-in-out infinite;
}

.pk-task-stopping .pk-task-bar > span {
    opacity: 0.35;
    animation-play-state: paused;
}

@keyframes pk-task-busy {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(290%);
    }
}

.pk-task-end {
    display: grid;
    align-items: center;
    justify-items: end;
    min-width: 44px;
    height: 52px;
    padding: 0 var(--gap-sm) 0 var(--gap-md);
}

.pk-task-end > * {
    grid-area: 1 / 1;
}

.pk-task-time {
    color: var(--muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity var(--speed);
}

.pk-task-end:focus-within .pk-task-time {
    opacity: 0;
}

.pk-task-button {
    position: relative;
    height: 28px;
    min-height: 28px;
    padding: 0 10px;
    background: none;
    color: var(--nav);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-sm);
    box-shadow: none;
    opacity: 0;
    transition: opacity var(--speed);
}

.pk-task-button:hover {
    background: var(--pk-raised-hover);
    color: var(--ink);
    box-shadow: var(--pk-edge);
}

.pk-task-button:active {
    background: var(--fill);
    box-shadow: var(--pk-recess);
}

.pk-task-dismiss {
    position: relative;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    color: var(--muted);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--speed);
}

.pk-task-button:focus-visible,
.pk-task-dismiss:focus-visible {
    opacity: 1;
}

.pk-tasks-body > .pk-tasks-empty {
    max-width: 22rem;
    margin: auto;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: var(--leading);
    text-align: center;
}

.pk-tasks-loader {
    display: flex;
    justify-content: center;
    padding: var(--gap-md) 0 var(--gap-sm);
    color: var(--muted);
}

.pk-tasks-loader .spinner-ring {
    width: 18px;
    height: 18px;
}

.pk-tasks-heading .pk-task-button,
.pk-tasks-loader .pk-task-button {
    opacity: 1;
}

@media (hover: hover) {
    .pk-task:hover {
        background: var(--fill);
        transition-duration: var(--pk-t-in);
    }

    .pk-task:hover .pk-task-time {
        opacity: 0;
    }

    .pk-task:hover .pk-task-button,
    .pk-task:hover .pk-task-dismiss {
        opacity: 1;
    }
}

@media (hover: none) {
    .pk-task-end {
        display: flex;
        gap: var(--gap-xs);
        padding-right: var(--gap-xs);
    }

    .pk-task-button,
    .pk-task-dismiss {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-task-bar-busy > span {
        width: 100%;
        opacity: 0.5;
        animation: none;
    }
}

body::before,
.pk-backdrop::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: var(--pk-backdrop) center / cover no-repeat;
    opacity: calc(var(--pk-backdrop-opacity) / 100);
}

.pk-appearance {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-xl);
}

.pk-backdrop {
    position: relative;
    z-index: 0;
    height: 0;
    padding-bottom: 62.5%;
    overflow: hidden;
    background: var(--bg-alt);
    border-radius: var(--radius);
    outline: 2px solid transparent;
    transition: outline-color var(--speed);
}

.pk-backdrop::before {
    position: absolute;
    height: 100%;
}

.pk-backdrop.pk-drop-over {
    outline-color: var(--pk-blue);
}

#pk-backdrop-empty {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: var(--text-body);
}

.pk-appearance-fields {
    display: grid;
    gap: var(--gap-lg);
}

.pk-backdrop-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-md) var(--gap-lg);
}

@media (max-width: 640px) {
    .pk-appearance {
        grid-template-columns: minmax(0, 1fr);
    }
}