.watermark-surface {
    position: relative;
    margin: 16px auto;
    max-width: 100%;
    line-height: 0;
    background: #fff;
    isolation: isolate;
}
.watermark-surface > canvas:not(.watermark-overlay),
.watermark-surface > video {
    display: block;
    width: 100%;
    height: auto;
}
.watermark-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.watermark-box {
    position: absolute;
    border: 2px dashed #2563eb;
    cursor: move;
    touch-action: none;
    min-width: 20px;
    min-height: 20px;
}
.watermark-box:focus {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}
.watermark-box > span {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 20px;
    height: 20px;
    background: #2563eb;
    border: 2px solid white;
    border-radius: 4px;
    cursor: nwse-resize;
}
#pw-settings details,
#mt-settings details {
    margin: 16px 0;
}
#pw-settings summary,
#mt-settings summary {
    padding: 12px 0;
    font-weight: 600;
    cursor: pointer;
}
#pw-settings select,
#mt-settings select {
    appearance: none;
    min-height: 46px;
    height: 46px;
}

#pw-settings select,
#mt-settings select {
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%23777' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}