.mi{--mi-page-gutter:clamp(16px,4vw,56px);--color-fg:oklch(25% .015 160);--color-fg-muted:oklch(48% .014 160);--color-bg:oklch(97% .004 110);--color-panel:oklch(100% 0 0);--color-border-line:oklch(87% .008 150);--color-ok:oklch(46% .11 155);--color-warn:oklch(53% .12 75);--color-bad:oklch(48% .17 25);--mi-r-lg:14px;--mi-r-md:10px;--mi-r-sm:8px;--mi-shadow:0 4px 6px rgba(0,0,0,.08);min-height:100dvh;margin:-8px;background:var(--color-bg);color:var(--color-fg);font-family:"MakeIt Montserrat",var(--font-anthropic-sans,Arial),sans-serif;font-size:14px;line-height:1.4;color-scheme:light}
.mi[data-theme=dark]{--color-fg:oklch(94% .005 150);--color-fg-muted:oklch(73% .012 150);--color-bg:oklch(18% .008 160);--color-panel:oklch(23% .01 160);--color-border-line:oklch(36% .01 160);--color-ok:oklch(76% .13 155);--color-warn:oklch(80% .12 75);--color-bad:oklch(73% .15 25);color-scheme:dark}
@media(prefers-color-scheme:dark){.mi[data-theme=auto]{--color-fg:oklch(94% .005 150);--color-fg-muted:oklch(73% .012 150);--color-bg:oklch(18% .008 160);--color-panel:oklch(23% .01 160);--color-border-line:oklch(36% .01 160);--color-ok:oklch(76% .13 155);--color-warn:oklch(80% .12 75);--color-bad:oklch(73% .15 25);color-scheme:dark}}
.mi .mi-header,.mi .mi-main,.mi .mi-footer,.mi .mi-card,.mi .mi-preview-panel,.mi .mi-input,.mi .mi-button,.mi .mi-dropzone{box-sizing:border-box}
.mi .mi-header{display:flex;align-items:center;gap:20px;padding:20px var(--mi-page-gutter);border-bottom:1px solid var(--color-border-line);background:var(--color-panel);flex-wrap:wrap}
.mi .mi-a{color:inherit;text-decoration:none}.mi .mi-brand{display:flex;align-items:center;flex-shrink:0}
.mi .mi-header-label,.mi .mi-eyebrow,.mi .mi-preview-top{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--color-fg-muted)}
.mi .mi-internal{font-size:.74rem;color:var(--color-fg-muted);margin-left:auto}.mi .mi-theme-control{display:flex;align-items:center;gap:8px}.mi .mi-theme-select{max-width:9rem}
.mi .mi-main{width:100%;margin:0;padding:28px var(--mi-page-gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.mi .mi-controls{display:grid;gap:20px;min-width:0}.mi .mi-intro{padding:0}.mi .mi-h1{font-size:clamp(1.5rem,3vw,2rem);margin:8px 0 12px;line-height:1.15}.mi .mi-h1,.mi .mi-h2{font-weight:700;letter-spacing:-.02em;text-wrap:balance}.mi .mi-h2{font-size:1rem;margin:0}.mi .mi-h3{font-size:.8rem;font-weight:600;color:var(--color-fg-muted);margin:0 0 8px;text-wrap:balance}
.mi .mi-p{margin:8px 0;font-size:.76rem;color:var(--color-fg-muted);line-height:1.4}.mi .mi-card,.mi .mi-preview-panel{padding:18px;background:var(--color-panel);border:1px solid var(--color-border-line);border-radius:var(--mi-r-lg);box-shadow:var(--mi-shadow)}
.mi .mi-step-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}.mi .mi-number{font-size:.7rem;font-weight:600;color:var(--color-fg-muted);font-variant-numeric:tabular-nums}.mi .mi-step-title #color-name{margin-left:auto;font-size:.76rem;color:var(--color-fg-muted)}
.mi .mi-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr));gap:10px}.mi .mi-button{font:inherit;cursor:pointer;color:var(--color-fg);border:1px solid var(--color-border-line);border-radius:var(--mi-r-sm);background:var(--color-panel);padding:10px 12px;min-height:40px}.mi .mi-button:hover{border-color:var(--color-fg-muted)}.mi .mi-button:disabled{opacity:.45;cursor:default}.mi .mi-button:focus-visible,.mi .mi-input:focus-visible,.mi .mi-a:focus-visible{outline:2px solid var(--color-fg);outline-offset:2px}
.mi .mi-swatch{padding:0;aspect-ratio:1;min-height:30px;max-width:40px;border-radius:999px;position:relative;background:var(--mi-product-color);border:3px solid var(--color-panel);outline:1px solid var(--color-border-line)}.mi .mi-swatch[aria-pressed=true]{outline:2px solid var(--color-fg)}.mi .mi-swatch[aria-pressed=true]:after{content:'✓';position:absolute;inset:4px;display:grid;place-items:center;border-radius:999px;font-size:.7rem;color:var(--color-bg);background:var(--color-fg)}
.mi .mi-leather-label{font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin-top:20px;color:var(--color-fg-muted)}.mi .mi-print-options{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.mi .mi-print-options .mi-button{flex:1;min-width:5rem;font-size:.74rem;border-radius:999px}.mi .mi-print-options .mi-selected{background:var(--color-fg);color:var(--color-bg);border-color:var(--color-fg)}
.mi .mi-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 16px;border:1px dashed var(--color-border-line);border-radius:var(--mi-r-md);background:var(--color-bg);text-align:center;cursor:pointer}.mi .mi-dropzone:hover,.mi .mi-dropzone.mi-drag{border-color:var(--color-fg-muted)}.mi .mi-dropzone:focus-within{outline:2px solid var(--color-fg);outline-offset:2px}.mi .mi-dropzone .mi-strong{font-size:.78rem;font-weight:600}.mi .mi-dropzone .mi-span{font-size:.74rem;color:var(--color-fg-muted)}.mi .mi-dropzone .mi-mask{width:26px;height:26px}.mi .mi-dropzone .mi-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.mi .mi-demo,.mi .mi-text-button{background:transparent;border:0;padding:4px 0;min-height:32px;font-size:.74rem;text-decoration:underline;text-underline-offset:3px}.mi .mi-step-title .mi-text-button{margin-left:auto}.mi .mi-file-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.mi #file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.76rem}
.mi .mi-dimension-fields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end}.mi .mi-label{font-size:.74rem;color:var(--color-fg-muted);font-weight:600}.mi .mi-dimension-fields .mi-label .mi-span{float:right;font-weight:400}.mi .mi-dimension-lock{padding-bottom:12px;color:var(--color-fg-muted)}.mi .mi-input{display:block;width:100%;min-width:0;padding:11px 12px;font:inherit;color:var(--color-fg);background:var(--color-bg);border:1px solid var(--color-border-line);border-radius:var(--mi-r-md);margin-top:8px}.mi .mi-input:disabled{opacity:.45}.mi .mi-input[aria-invalid=true]{border-color:var(--color-bad)}.mi .mi-dimension-fields .mi-input{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}.mi .mi-theme-select{margin:0;font-size:.74rem}.mi .mi-customer-label .mi-span{float:right;font-weight:400}.mi .mi-download{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--color-fg);color:var(--color-bg);font-weight:600;min-height:48px}.mi .mi-export .mi-p,.mi .mi-privacy{text-align:center}.mi .mi-privacy{display:flex;justify-content:center;align-items:center;gap:8px;margin:0}.mi .mi-privacy .mi-mask{width:14px;height:14px}
.mi .mi-preview-panel{min-width:0}.mi .mi-preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.mi .mi-canvas-wrap{position:relative;width:100%;aspect-ratio:1;margin:0;overflow:hidden;border-radius:var(--mi-r-md)}.mi .mi-canvas{display:block;width:100%;height:auto}.mi .mi-preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:.74rem;color:var(--color-fg-muted)}.mi .mi-ratio{white-space:nowrap}.mi .mi-scale-panel{margin-top:20px;border-top:1px solid var(--color-border-line);padding-top:16px}.mi .mi-scale-panel .mi-canvas{background:var(--color-panel);border-radius:var(--mi-r-md)}.mi .mi-loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--color-panel);color:var(--color-fg-muted);font-size:.78rem}.mi .mi-status{text-align:center;min-height:1em}.mi .mi-error{padding:12px;border:1px solid var(--color-border-line);border-radius:var(--mi-r-sm);text-align:center;color:var(--color-fg-muted)}.mi .mi-error:before{content:'•';color:var(--color-bad);margin-right:8px}.mi .mi-up{color:var(--color-ok)}.mi .mi-down{color:var(--color-bad)}.mi [hidden]{display:none!important}.mi .mi-footer{width:100%;margin:0;padding:20px var(--mi-page-gutter);border-top:1px solid var(--color-border-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.7rem;color:var(--color-fg-muted)}
@media(prefers-reduced-motion:no-preference){.mi .mi-button{transition:border-color .15s,transform .15s}.mi .mi-button:not(:disabled):hover{transform:translateY(-1px)}}
@media(max-width:850px){.mi .mi-main{grid-template-columns:minmax(0,1fr)}.mi .mi-header{gap:12px}.mi .mi-internal{display:none}.mi .mi-theme-control{margin-left:auto}.mi .mi-header-label{display:none}}

.mi .mi-canvas-wrap .mi-canvas{height:100%;object-fit:cover;object-position:center}