:root { color-scheme: light; font-family: system-ui, -apple-system, "Microsoft YaHei", sans-serif; color: #2a2028; background: #fff9fb; }
body { margin: 0; }
main { max-width: 1240px; margin: 0 auto; padding: 24px; }
.login-main { min-height: 100vh; display: grid; place-items: center; box-sizing: border-box; }
.login-card { width: min(100%, 360px); border: 1px solid #eadde5; background: #fff; border-radius: 10px; padding: 24px; }
.login-card form { display: grid; gap: 12px; }
.login-card label { display: grid; gap: 5px; font-size: .9rem; }
.login-card input { border: 1px solid #cfc0ca; border-radius: 6px; padding: 8px; }
h1 { margin: 0 0 8px; font-size: 1.45rem; }
h2 { font-size: 1rem; margin: 0 0 8px; }
.notice, .fineprint { color: #685b65; font-size: .9rem; }
.controls { border: 1px solid #eadde5; background: #fff; border-radius: 10px; padding: 16px; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.controls fieldset { border: 1px solid #eadde5; border-radius: 7px; padding: 8px; margin: 0; }
.controls legend { font-size: .8rem; color: #685b65; }
button, select, input { font: inherit; }
button { cursor: pointer; border: 1px solid #cfc0ca; background: #fff; border-radius: 6px; padding: 7px 10px; }
button.active { background: #8b294e; border-color: #8b294e; color: #fff; }
.brush-label { font-size: .85rem; color: #685b65; }
#generateButton { background: #47223c; border-color: #47223c; color: #fff; font-weight: 650; }
#generateButton:disabled { cursor: not-allowed; opacity: .5; }
#status { width: 100%; margin: 0; color: #5f4c59; font-size: .9rem; }
.comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
figure { min-width: 0; margin: 0; border: 1px solid #eadde5; border-radius: 10px; padding: 10px; background: #fff; }
figcaption { font-weight: 650; margin-bottom: 8px; font-size: .9rem; }
canvas { display: block; width: 100%; height: auto; background: #f3edf0; }
.mask-stage { position: relative; overflow: hidden; background: #f3edf0; touch-action: none; }
.mask-viewport { position: relative; width: 100%; height: 100%; transform-origin: center center; will-change: transform; }
.mask-viewport img, .mask-viewport canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mask-viewport img { object-fit: fill; user-select: none; -webkit-user-drag: none; }
.mask-viewport canvas { background: transparent; touch-action: none; }
@media (max-width: 780px) { .comparison { grid-template-columns: 1fr; } }