.hp-image-frame{box-sizing:border-box;width:min(720px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:28px;border:1px solid #69547f;border-radius:24px;background:#1b1428;color:#f6f0ff;box-shadow:0 24px 100px #0009;overflow:auto;color-scheme:dark}
.hp-image-frame::backdrop{background:#10091bba;backdrop-filter:blur(5px)}
.hp-image-frame *{box-sizing:border-box}
.hp-image-frame__intro span{font-size:11px;letter-spacing:.14em;color:#ccb1ff;font-weight:700}
.hp-image-frame h2{font-size:clamp(24px,4vw,32px);line-height:1.12;letter-spacing:-.03em;margin:12px 0;color:inherit}
.hp-image-frame p{font-size:14px;line-height:1.55;color:#d4c9e0;margin:8px 0 16px}
.hp-image-frame canvas{display:block;width:min(100%,45dvh);height:auto;margin:auto;border-radius:12px;background:white;border:1px solid #776887;touch-action:none;cursor:grab}
.hp-image-frame canvas:active{cursor:grabbing}
.hp-image-frame__filename{overflow-wrap:anywhere;font-size:12px!important}
.hp-image-frame fieldset{border:0;padding:16px 0;display:flex;gap:16px;flex-wrap:wrap;margin:0}
.hp-image-frame legend{padding-top:18px;font-weight:700;font-size:14px}
.hp-image-frame label{color:#f6f0ff!important;font-size:14px!important;display:flex;gap:8px;align-items:center}
.hp-image-frame input{accent-color:#b48aff}
.hp-image-frame__controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.hp-image-frame__controls label{display:grid;gap:8px}
.hp-image-frame input[type=range]{width:100%;min-height:28px}
.hp-image-frame__hint{font-size:12px!important;margin-top:16px!important}
.hp-image-frame__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.hp-image-frame button{font:inherit;font-size:13px;font-weight:650;min-height:44px;border-radius:10px;border:1px solid #756486;background:#2a203b;color:#fff;padding:10px 14px;cursor:pointer}
.hp-image-frame button[data-action=apply]{background:#7540da;border-color:#bd91ff;margin-left:auto}
.hp-image-frame :focus-visible{outline:3px solid #d6baff;outline-offset:3px}
.hp-image-frame button:disabled{opacity:.6;cursor:wait}
@media(max-width:520px){.hp-image-frame{padding:20px}.hp-image-frame__controls{grid-template-columns:1fr 1fr}.hp-image-frame__controls label:first-child{grid-column:1/-1}.hp-image-frame__actions{display:grid;grid-template-columns:1fr 1fr}.hp-image-frame button[data-action=apply]{margin:0}}