:root{--replay-bg: #fcf5eb;--replay-ink: #111111;--replay-ink-muted: #666666;--replay-surface: #ffffff;--replay-border: #dcdcdc;--replay-accent: #f76421;--replay-accent-hover: #d9551a;--replay-cta: #ffb100;--replay-cta-hover: #b37c00;--replay-shadow: 0 14px 44px rgba(0, 0, 0, .2);--replay-radius: 20px;--replay-font: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;font-family:var(--replay-font);color:var(--replay-ink);background:#fff}button{font:inherit;cursor:pointer}.replay-page{min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;display:flex;flex-direction:column;background-color:#fcf5eb;overflow:hidden}.replay-shell{display:contents}@media(min-width:1024px){.replay-page{padding:22px;background-color:#fcf5eb}.replay-shell{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:min(760px,100%);margin:0 auto;border-radius:var(--replay-radius);overflow:hidden;box-shadow:var(--replay-shadow);background-color:#fcf5eb}}.replay-header{flex-shrink:0;display:flex;flex-direction:row;align-items:center;background:#fff;border-bottom:1px solid var(--replay-border);padding:10px 18px;gap:14px;position:sticky;top:0;z-index:100}.replay-header-content{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.replay-header-title{font-size:20px;font-weight:700;line-height:1.2;color:#000;margin:0}@media(max-width:1023.98px){.replay-header-title{font-size:15px}}.replay-header-step{font-size:13px;font-weight:400;line-height:1.2;color:#666;margin:0}.replay-header-actions{display:flex;flex-direction:row;align-items:center;gap:4px;flex-shrink:0}.replay-header-change{appearance:none;border:1px solid var(--replay-border);background:#fff;color:#111;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease}.replay-header-change:hover{background:#f7f7f7;border-color:#cfcfcf}.replay-header-change[hidden]{display:none!important}.replay-page__canvas{width:100%;flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:center;touch-action:none;user-select:none;padding:12px}.replay-picture-rendering{width:100%;max-width:none;aspect-ratio:1 / 1;position:relative;flex-shrink:0}.canvas-wrapper{width:100%;height:100%;position:relative;border-radius:0;overflow:hidden;background:transparent;box-shadow:0 8px 28px #0000002e}#mozaikCanvas{width:100%;height:100%;display:block;touch-action:none;user-select:none}.canvas-wrapper--loading #mozaikCanvas{visibility:hidden}.mozaik-canvas-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fcf5ebeb;z-index:2}.mozaik-canvas-loader[hidden]{display:none!important}.mozaik-canvas-loader__puzzle{width:min(56%,220px);height:min(56%,220px)}.mozaik-canvas-loader__text{color:var(--replay-ink-muted);font-size:.95rem}.replay-mosaic-size-btn{position:absolute;right:10px;bottom:10px;z-index:3;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:10px;background:#ffffffeb;color:#111;box-shadow:0 4px 14px #00000029;transition:background-color .15s ease,transform .15s ease}.replay-mosaic-size-btn:hover{background:#fff;transform:translateY(-1px)}.replay-mosaic-size-btn.is-enlarged svg{transform:rotate(180deg)}.replay-btn{appearance:none;border:1px solid var(--replay-border);background:var(--replay-surface);color:var(--replay-ink);border-radius:8px;padding:12px 22px;font-weight:600;transition:background .16s ease,transform .16s ease,border-color .16s ease}.replay-btn:hover{border-color:#cfcfcf;transform:translateY(-1px)}.replay-btn--primary{background:var(--replay-accent);border-color:transparent;color:#fff}.replay-btn--primary:hover{background:var(--replay-accent-hover)}.replay-upload-screen{width:min(90vw,420px);margin:auto;text-align:center;padding:36px 28px;background:var(--replay-surface);border-radius:16px;box-shadow:0 10px 28px #0000001f;border:1px solid var(--replay-border);flex-shrink:0}.replay-upload-screen[hidden],.replay-editor-screen[hidden],.replay-instructions[hidden],.replay-footer[hidden]{display:none!important}.replay-upload-screen h2{margin:0 0 8px;font-size:1.35rem;letter-spacing:-.02em}.replay-upload-screen p{margin:0 0 22px;color:var(--replay-ink-muted);line-height:1.45}.replay-upload-error{width:min(92%,520px);margin:12px auto 0;padding:12px 14px;border-radius:12px;background:#f8e8e4;color:#6b2e24;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0}.replay-upload-error[hidden]{display:none!important}.replay-upload-error button{border:0;background:transparent;color:inherit;font-size:1.2rem;line-height:1;padding:0 4px}.replay-editor-screen{width:100%;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch}.replay-footer{flex-shrink:0;position:sticky;bottom:0;z-index:90;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;background:#fff;padding:12px 16px;box-shadow:0 -2px 10px #0000000f}.replay-footer-bricks{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;max-height:72px;overflow:auto}.replay-brick-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#111;line-height:1;white-space:nowrap}.replay-brick-chip__swatch{width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.12);flex-shrink:0}.replay-brick-chip__count{font-variant-numeric:tabular-nums}.replay-footer-instructions{flex-shrink:0;background:var(--replay-cta);color:#fff;border:none;border-radius:8px;padding:16px 28px;font-size:16px;font-weight:600;white-space:nowrap;transition:background-color .2s ease,transform .15s ease}.replay-footer-instructions:hover{background:var(--replay-cta-hover)}.replay-footer-instructions:active{transform:scale(.98)}@media(max-width:768px){.replay-footer-instructions{padding:14px 18px;font-size:15px}.replay-footer-bricks{max-height:64px;gap:6px 8px}.replay-brick-chip{font-size:11px}}.replay-instructions{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:#1c1a1759}.replay-instructions__card{width:min(92vw,420px);background:var(--replay-surface);border-radius:16px;padding:24px;box-shadow:var(--replay-shadow)}.replay-instructions__card h2{margin:0 0 10px;font-size:1.3rem}.replay-instructions__card p{margin:0 0 18px;color:var(--replay-ink-muted);line-height:1.45}.replay-instructions__actions{display:flex;justify-content:flex-end}#imageInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
