.custom-profile-sketch {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #b6c9c4;
    border-radius: .75rem;
    background: #fafaf6;
    color: #253b37;
}
.custom-profile-sketch[hidden] { display: none; }
.custom-profile-sketch h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.custom-profile-sketch .pb-draft-help,
.custom-profile-sketch .pb-draft-status { margin: .6rem 0; font-size: .875rem; line-height: 1.5; }
.custom-profile-sketch svg {
    display: block;
    width: 100%;
    max-height: 420px;
    aspect-ratio: 560 / 300;
    border: 1px solid #b6c9c4;
    border-radius: .5rem;
    background: #fffef9;
    cursor: crosshair;
    user-select: none;
    touch-action: none;
}
.custom-profile-sketch .pb-draft-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.custom-profile-sketch button {
    min-height: 44px;
    padding: .55rem .85rem;
    border: 1px solid #78918a;
    border-radius: .5rem;
    background: #fff;
    color: #253b37;
    font: inherit;
    cursor: pointer;
}
.custom-profile-sketch [data-draft-action="finish"] { background: #205c50; color: #fff; }
.custom-profile-sketch button:disabled { opacity: .45; cursor: default; }
.custom-profile-sketch :focus-visible { outline: 3px solid #338a77; outline-offset: 3px; }
@media (max-width: 600px) {
    .custom-profile-sketch { padding: .65rem; }
    .custom-profile-sketch svg { min-height: 230px; }
}