.g-mirror-paint{--mp-c1:#e0453a;--mp-c2:#2f6fd0;--mp-c3:#f2c23a;--mp-c4:#2fa35a;--mp-c5:#8a54cf;--mp-mirror:var(--c-brand);gap:var(--sp-3)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .g-mirror-paint{--mp-c1:#f27a70;--mp-c2:#74a8f7;--mp-c3:#f5d05e;--mp-c4:#5cc984;--mp-c5:#b78cf2}}:root[data-theme=dark] .g-mirror-paint{--mp-c1:#f27a70;--mp-c2:#74a8f7;--mp-c3:#f5d05e;--mp-c4:#5cc984;--mp-c5:#b78cf2}.g-mirror-paint :focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}.g-mirror-paint .mp-palette{justify-content:center;gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--r-full);background:var(--c-surface-2);flex-wrap:wrap;display:flex}.g-mirror-paint .mp-swatch{width:var(--tap);height:var(--tap);border-radius:var(--r-full);background:var(--mp-paint,var(--c-surface));color:var(--c-text-on-accent);cursor:pointer;border:3px solid #0000;place-items:center;padding:0;display:grid;box-shadow:inset 0 0 0 2px #0000001f}.g-mirror-paint .mp-swatch[data-color="1"]{--mp-paint:var(--mp-c1)}.g-mirror-paint .mp-swatch[data-color="2"]{--mp-paint:var(--mp-c2)}.g-mirror-paint .mp-swatch[data-color="3"]{--mp-paint:var(--mp-c3)}.g-mirror-paint .mp-swatch[data-color="4"]{--mp-paint:var(--mp-c4)}.g-mirror-paint .mp-swatch[data-color="5"]{--mp-paint:var(--mp-c5)}.g-mirror-paint .mp-swatch[data-color="0"]{--mp-paint:var(--c-surface);color:var(--c-text-dim);box-shadow:inset 0 0 0 2px var(--c-border-strong)}.g-mirror-paint .mp-swatch.is-selected{border-color:var(--mp-mirror);box-shadow:0 0 0 3px var(--c-surface), 0 0 0 5px var(--mp-mirror)}.g-mirror-paint .mp-brush,.g-mirror-paint .mp-eraser{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;opacity:0;width:22px;height:22px}.g-mirror-paint .mp-swatch[data-color="0"] .mp-eraser,.g-mirror-paint .mp-swatch.is-selected .mp-brush{opacity:1}.g-mirror-paint .mp-board{grid-template-rows:repeat(var(--mp-rows,4), 1fr);width:min(100%, calc(var(--mp-cols,4) * 52px));border-radius:var(--r-lg);background:var(--c-surface-3);gap:3px;padding:6px;display:grid;position:relative}.g-mirror-paint .mp-row{grid-template-columns:repeat(var(--mp-cols,4), 1fr);gap:3px;display:grid}.g-mirror-paint .mp-cell{aspect-ratio:1;border:1px solid var(--c-border);background:var(--mp-paint,var(--c-surface));cursor:pointer;border-radius:5px;min-width:0;padding:0}.g-mirror-paint .mp-cell[data-color="1"]{--mp-paint:var(--mp-c1)}.g-mirror-paint .mp-cell[data-color="2"]{--mp-paint:var(--mp-c2)}.g-mirror-paint .mp-cell[data-color="3"]{--mp-paint:var(--mp-c3)}.g-mirror-paint .mp-cell[data-color="4"]{--mp-paint:var(--mp-c4)}.g-mirror-paint .mp-cell[data-color="5"]{--mp-paint:var(--mp-c5)}.g-mirror-paint .mp-cell[data-color]:not([data-color="0"]){border-color:color-mix(in srgb, var(--mp-paint) 70%, #000 30%)}.g-mirror-paint .mp-cell.is-given{cursor:default;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c-surface) 40%, transparent)}.g-mirror-paint .mp-cell.is-given[data-color="0"]{background:var(--c-surface-2);border-style:dashed}.g-mirror-paint .mp-cell:disabled{cursor:default}.g-mirror-paint .mp-board:before,.g-mirror-paint .mp-board:after{content:"";z-index:1;border-radius:var(--r-full);background:var(--mp-mirror);box-shadow:0 0 0 2px var(--c-surface-3);pointer-events:none;display:none;position:absolute}.g-mirror-paint .mp-board.axis-vertical:before,.g-mirror-paint .mp-board.axis-both:before{width:4px;display:block;inset-block:2px;inset-inline-start:calc(50% - 2px)}.g-mirror-paint .mp-board.axis-horizontal:after,.g-mirror-paint .mp-board.axis-both:after{height:4px;display:block;inset-block-start:calc(50% - 2px);inset-inline:2px}.g-mirror-paint .mp-cell.is-wrong{outline:3px dashed var(--c-warn);outline-offset:-3px;background-image:repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--c-surface) 55%, transparent) 4px 8px)}.g-mirror-paint .mp-cell.is-hinted{outline:3px solid var(--c-accent);outline-offset:-3px}.g-mirror-paint.is-done .mp-board{background:var(--c-good-soft)}.g-mirror-paint.is-done .mp-board:before,.g-mirror-paint.is-done .mp-board:after{background:var(--c-good);box-shadow:0 0 0 2px var(--c-good-soft)}.g-mirror-paint .mp-msg{max-width:36ch;min-height:2.6em;color:var(--c-text-dim);font-size:var(--fs-md);font-weight:var(--fw-med);line-height:var(--lh-snug);text-align:center;text-wrap:balance;margin:0}.g-mirror-paint .mp-msg.is-good{color:var(--c-good);font-weight:var(--fw-bold)}.g-mirror-paint .mp-msg.is-almost{color:var(--c-warn);font-weight:var(--fw-semi)}.g-mirror-paint .mp-actions{justify-content:center;display:flex}.g-mirror-paint .mp-check{min-height:var(--tap);padding-block:var(--sp-2);padding-inline:var(--sp-5);border:2px solid var(--c-border-strong);border-radius:var(--r-full);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semi);cursor:pointer}.g-mirror-paint .mp-check:disabled{opacity:.5;cursor:default}.g-mirror-paint .mp-note{max-width:36ch;color:var(--c-text-faint);font-size:var(--fs-xs);text-align:center;margin:0}.g-mirror-paint.is-done .mp-note,.g-mirror-paint.is-done .mp-actions{visibility:hidden}.g-mirror-paint .mp-cell,.g-mirror-paint .mp-swatch{transition:none}.g-mirror-paint .mp-cell:active,.g-mirror-paint .mp-cell:not(:disabled):active{transform:none}@media (prefers-reduced-motion:no-preference){.g-mirror-paint.is-motion .mp-cell{transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}.g-mirror-paint.is-motion .mp-swatch{transition:box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease-bounce)}.g-mirror-paint.is-motion .mp-swatch.is-selected{transform:scale(1.1)}.g-mirror-paint.is-motion .mp-cell:not(:disabled):active{transform:scale(.9)}.g-mirror-paint.is-motion .mp-cell.is-hinted{animation:mp-sparkle var(--dur-slow) var(--ease-bounce)}@keyframes mp-sparkle{0%{transform:scale(.7)}to{transform:scale(1)}}}