:root{color-scheme:light;--ink:#292d25;--muted:#62675c;--accent:#cb512e;--line:#dedfd4}
*{box-sizing:border-box}body{margin:0;background:#f8f8f1;color:var(--ink);font-family:Arial,Helvetica,sans-serif}.header,main,footer{max-width:1140px;margin:auto}.header{padding:32px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-size:23px;font-weight:800;letter-spacing:-1px}.brand-icon{color:var(--accent);font-size:30px;vertical-align:middle;margin-right:7px}.brand-dot{color:var(--accent)}.badge{font-size:12px;border:1px solid var(--line);border-radius:30px;padding:9px 13px;color:var(--muted)}main{padding:0 28px}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center;padding:70px 0}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent);margin:0 0 25px}h1{font-size:clamp(40px,5.4vw,65px);line-height:1.04;letter-spacing:-3px;margin:0 0 25px}h1 span{color:var(--accent)}.description{font-size:17px;line-height:1.7;color:var(--muted);max-width:440px}.notice{display:flex;gap:12px;background:#eeefe5;border:1px solid #dedfce;border-radius:12px;padding:18px;margin-top:28px;font-size:14px}.notice p{margin:6px 0 0;color:var(--muted);line-height:1.5}.status-dot{width:8px;height:8px;flex-shrink:0;margin-top:5px;border-radius:50%;background:#6c824a}.art-card{background:#eee9df;border-radius:18px;padding:22px;border:1px solid #e3ded3;transform:rotate(2deg)}.pixel-art{display:block;width:100%;max-height:330px}.art-caption{display:flex;justify-content:space-between;padding:20px 2px 0;color:#666252;font-size:13px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding:32px 0 48px;gap:42px}.number{font-size:12px;color:var(--accent);font-weight:700}h2{font-size:17px;margin:12px 0 8px}.steps p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}footer{border-top:1px solid var(--line);padding:24px 28px;font-size:12px;display:flex;justify-content:space-between;color:var(--muted)}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}@media(max-width:720px){.header{padding:22px 20px}.brand{font-size:20px}.badge{font-size:11px}main{padding:0 20px}.hero{grid-template-columns:1fr;gap:30px;padding:42px 0}.art-card{max-width:380px;width:100%;margin:auto;transform:none}.steps{grid-template-columns:1fr;gap:25px;padding-bottom:32px}h1{letter-spacing:-2px}.description{font-size:16px}footer{gap:16px;flex-wrap:wrap;padding:22px 20px}}
.upload-form{margin-top:28px}.upload-form label{display:block;font-size:14px;font-weight:700;margin-bottom:10px}.upload-form input{display:block;width:100%;max-width:440px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:14px}.upload-form input::file-selector-button{border:0;background:#eaece2;color:var(--ink);border-radius:6px;padding:9px 12px;margin-right:12px;cursor:pointer}.upload-hint{font-size:12px;color:var(--muted);margin:9px 0 17px}.upload-form button{border:0;border-radius:9px;background:var(--accent);color:#fff;padding:14px 20px;font-size:14px;font-weight:700;cursor:pointer}.upload-form button:hover{background:#ad4023}.upload-form button span{margin-left:10px}.form-error{color:#a92819;background:#fff0ea;border:1px solid #edb8a8;border-radius:9px;padding:12px 14px;font-size:14px}.uploaded-image{display:block;width:100%;max-height:330px;object-fit:contain;background:#e5e0d6;border-radius:7px}.filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.hero.has-preview{display:block;padding:54px 0}.hero.has-preview .intro{max-width:680px}.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}.preview-card{margin:0;background:#eee9df;border:1px solid #e3ded3;border-radius:16px;padding:14px;min-width:0}.preview-image{height:300px;background:#e5e0d6;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-image img{display:block;width:100%;height:100%;object-fit:contain}.preview-image .pixelated-image{image-rendering:pixelated}.preview-card figcaption{display:flex;justify-content:space-between;gap:12px;padding:15px 3px 3px;font-size:13px;color:#666252}.preview-card figcaption strong{color:var(--ink)}@media(max-width:720px){.hero.has-preview{padding:42px 0}.comparison{grid-template-columns:1fr;gap:16px;margin-top:28px}.preview-image{height:260px}}
.image-filename{margin:0 3px 4px;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 20px;max-width:680px}.control{background:#eeefe5;border:1px solid #dedfce;border-radius:12px;padding:16px;min-width:0}.control label{font-size:13px;margin:0 0 12px}.control output{color:var(--accent);font-weight:800}.control input[type=range]{display:block;width:100%;accent-color:var(--accent);cursor:pointer}.control p{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0}.upload-status{font-size:12px;color:var(--muted);margin:12px 0}.upload-status:empty{display:none}@media(max-width:720px){.controls{grid-template-columns:1fr;gap:12px}}
.filament-details{grid-column:1/-1;background:#eeefe5;border:1px solid #dedfce;border-radius:12px;padding:16px 20px}.filament-details summary{font-size:14px;font-weight:700;cursor:pointer}.filament-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;list-style:none;padding:16px 0 0;margin:0}.filament-list li{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;color:var(--muted)}.filament-list li span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filament-list li span:last-child{margin-left:auto;white-space:nowrap}.filament-swatch{display:inline-block;width:18px;height:18px;flex:none;border-radius:4px;border:1px solid #aaa}@media(max-width:720px){.filament-list{grid-template-columns:1fr}}
.comparison{align-items:start}.preview-image{height:auto;background:transparent;display:block}.preview-image img{width:100%;height:auto;object-fit:unset}
.mode-control{grid-column:1/-1}.mode-control select{display:block;width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.mode-control{min-width:0}.mode-control legend{font-size:13px;font-weight:700;padding:0 5px}.upload-form .image-choice{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:14px;font-weight:500;cursor:pointer}.upload-form .image-choice input{display:inline-block;width:auto;max-width:none;padding:0;margin:0;flex:none;accent-color:var(--accent);border:0;background:transparent;border-radius:0}.grayscale-control{grid-column:1/-1}.grayscale-control[hidden]{display:none}
.recolor-panel{grid-column:1/-1;background:#eeefe5;border:1px solid #dedfce;border-radius:12px;padding:18px 20px}.recolor-panel h2{font-size:17px;margin:0 0 5px}.recolor-panel>p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 15px}.recolor-list{display:grid;gap:8px;max-height:360px;overflow:auto}.recolor-row{display:grid;grid-template-columns:18px minmax(120px,1fr) 18px minmax(180px,1.15fr) 18px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}.recolor-row label{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:12px}.recolor-row label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recolor-row label span{color:var(--muted)}.recolor-row select{width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}.recolor-arrow{text-align:center;color:var(--accent);font-weight:700}@media(max-width:720px){.recolor-row{grid-template-columns:18px minmax(0,1fr) 16px minmax(0,1.2fr) 18px;gap:6px}.recolor-panel{padding:16px 12px}}
.reset-recolor{display:inline-block;margin:0 0 14px;padding:8px 12px;border:1px solid #b9bcae;border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.reset-recolor:hover{border-color:var(--accent);color:var(--accent)}.reset-recolor:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pick-hint{display:none;margin:9px 3px 2px;color:var(--muted);font-size:12px}.js-enabled .pick-hint{display:block}.js-enabled .pixelated-image{cursor:crosshair}.recolor-panel>.pick-status{min-height:0;margin:0;color:var(--accent);font-weight:700}.pick-status:empty{display:none}.recolor-row.is-picked{background:#fff8e7;outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px;padding-left:6px;padding-right:6px}
.recolor-row.is-changed{border-left:3px solid var(--accent);padding-left:7px}.recolor-trigger{display:none;align-items:center;gap:9px;width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:12px;text-align:left;cursor:pointer}.recolor-trigger .selected-filament-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.recolor-trigger:focus-visible,.filament-option:focus-visible,.filament-dialog-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.js-enabled .recolor-trigger{display:flex}.js-enabled .recolor-select,.js-enabled .target-swatch{display:none}.js-enabled .recolor-row{grid-template-columns:18px minmax(120px,1fr) 18px minmax(180px,1.15fr)}@media(max-width:720px){.js-enabled .recolor-row{grid-template-columns:18px minmax(0,1fr) 16px minmax(0,1.2fr)}}
.filament-details h2{font-size:16px;margin:0 0 5px}.filament-details>p{font-size:12px;color:var(--muted);margin:0}.filament-name small{font-size:10px;color:var(--muted)}.filament-amount{font-weight:700;color:var(--ink)}
.filament-dialog{width:min(680px,calc(100vw - 28px));max-height:85vh;overflow-y:auto;padding:0;border:1px solid var(--line);border-radius:14px;background:#f8f8f1;color:var(--ink);box-shadow:0 20px 55px rgba(0,0,0,.18)}.filament-dialog::backdrop{background:rgba(25,30,24,.5)}.filament-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px 8px}.filament-dialog-header h2{font-size:18px;margin:0}.filament-dialog-close{border:0;background:transparent;color:var(--ink);font-size:25px;line-height:1;cursor:pointer}.filament-dialog-description{margin:0;padding:0 20px 12px;font-size:13px;line-height:1.5;color:var(--muted)}.filament-groups{padding:0 20px 20px}.filament-group h3{font-size:13px;margin:18px 0 8px}.filament-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.filament-option{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:12px;text-align:left;cursor:pointer}.filament-option:hover{border-color:var(--accent)}.filament-option[aria-pressed=true]{border-color:var(--accent);background:#fff3ed}.filament-option[aria-pressed=true]::after{content:"✓";color:var(--accent);font-weight:800}.filament-option .filament-swatch{width:22px;height:22px}.filament-option span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filament-option small{font-size:10px;color:var(--muted)}@media(max-width:600px){.filament-options{grid-template-columns:1fr}.filament-dialog-header,.filament-dialog-description,.filament-groups{padding-left:14px;padding-right:14px}}
.purchase-next{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.purchase-next h2{font-size:17px;margin:0 0 6px}.purchase-next p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}.purchase-next button,.checkout-form button{border:0;border-radius:8px;background:var(--accent);color:#fff;padding:13px 17px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}.purchase-next button:hover,.checkout-form button:hover{background:#ad4023}
.checkout-page{padding-top:58px;padding-bottom:68px}.checkout-page h1{font-size:clamp(34px,4.2vw,52px);letter-spacing:-2px}.checkout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px;align-items:start}.checkout-card{min-width:0;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px}.checkout-card h2{font-size:20px;margin:0 0 20px}.checkout-preview{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;image-rendering:pixelated;background:#eee9df;border-radius:8px}.checkout-filename{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.checkout-facts{margin:20px 0 0}.checkout-facts div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13px}.checkout-facts dt{color:var(--muted);flex:none}.checkout-facts dd{margin:0;text-align:right;overflow-wrap:anywhere}.checkout-note{font-size:12px;line-height:1.6;color:var(--muted);margin:20px 0 0}.checkout-field{margin-bottom:14px}.checkout-field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}.checkout-field input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:14px}.checkout-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.field-error{font-size:12px;color:#a92819;margin:5px 0}.checkout-form button{margin-top:18px}.order-id{font-family:monospace;font-size:11px}.checkout-home-link{margin:24px 0 0}.checkout-home-link a{color:var(--accent);font-weight:700}@media(max-width:720px){.checkout-page{padding-top:40px;padding-bottom:48px}.checkout-grid{grid-template-columns:1fr;gap:16px}.checkout-card{padding:18px}}