:root{--ink:#282b25;--muted:#73786d;--line:#dcded3;--paper:#f6f5ee;--accent:#405444}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}button,select{font:inherit}button{cursor:pointer}header{height:96px;max-width:1440px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-size:24px;font-weight:750;letter-spacing:-1px}.brand span{display:block;font-size:9px;letter-spacing:2.5px;margin-top:3px;font-weight:500}.badge,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650}.badge{border:1px solid #cdd2c5;padding:9px 13px;border-radius:30px;color:var(--muted)}main{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.08fr 1fr;gap:6%;padding:44px 5% 60px}.preview{align-self:start;position:sticky;top:20px}.eyebrow{color:#73806d}h1{font-size:43px;line-height:1.2;letter-spacing:-2px;margin:18px 0 12px;font-weight:600}p{font-size:14px;line-height:1.75;color:var(--muted)}.stage{position:relative;aspect-ratio:1;background:#e8eade;border-radius:22px;overflow:hidden;margin-top:30px;background-image:radial-gradient(ellipse at 40% 35%,#f5f5ec,#e4e7d9)}canvas{width:100%;height:100%;display:block;filter:drop-shadow(0px 9px 9px #2836261c)}.stage-label{position:absolute;left:22px;top:22px;font-size:10px;letter-spacing:1px;color:#6b745e;background:#f5f5e8c9;padding:7px 10px;border-radius:20px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e8eade}#loading[hidden]{display:none}.preview-tools{display:flex;justify-content:space-between;margin:14px 0}.preview-tools button{border:0;background:none;padding:8px 0;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}.preview-tools button[aria-pressed=true]{color:#ac4928}.notice{font-size:11px;line-height:1.7;border-top:1px solid var(--line);padding-top:15px;margin:0}.section-title h2{font-size:24px;letter-spacing:-1px;margin:12px 0 5px;font-weight:600}.section-title p{font-size:12px;margin-bottom:25px}.option{border-top:1px solid var(--line);padding:21px 0}.option-heading{display:flex;align-items:center;gap:10px;margin-bottom:15px}.number{font-size:10px;color:#87917f;border:1px solid #c5cbbc;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}.option h3{font-size:15px;margin:0;flex:1;font-weight:600}.chosen{font-size:12px;color:var(--accent)}.material-tabs{display:flex;gap:8px;margin-bottom:14px}.material-tabs button,.same{border:1px solid #d6dacd;border-radius:7px;background:transparent;padding:9px 15px;font-size:12px;color:#66725e}.material-tabs button[aria-pressed=true],.same[aria-pressed=true]{background:#405444;color:white;border-color:#405444}.swatches{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:11px 7px}.swatch{border:0;background:transparent;min-width:0;padding:4px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}.swatch i{width:28px;height:28px;border-radius:50%;display:block;background:var(--swatch);box-shadow:inset 0 0 0 1px #00000012}.swatch[aria-pressed=true] i{outline:1px solid #405444;outline-offset:4px}.swatch[aria-pressed=true]::after{content:'✓';position:absolute;left:calc(50% + 6px);top:19px;background:#405444;color:white;border:2px solid var(--paper);width:14px;height:14px;border-radius:50%;font-size:9px;display:grid;place-items:center}.swatch span{font-size:9px;color:#73786d;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}.same{margin-bottom:15px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #c78c49;outline-offset:4px}.result{margin-top:16px;padding:25px;background:#e9ecdf;border-radius:16px}.result h2{font-size:19px;letter-spacing:-.6px;margin:10px 0 21px}dl{margin:0}dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #d6dccb;padding:11px 0;gap:16px;font-size:13px}dt{color:#727b67}dd{margin:0;text-align:right;font-weight:600}#summary{font-size:12px;color:#56634e;margin:18px 0}.primary{display:flex;justify-content:space-between;background:#405444;color:white;border:0;border-radius:9px;padding:16px 18px;width:100%;font-size:14px}.result small{font-size:11px;line-height:1.7;color:#748168;display:block;margin-top:16px}#copy-status{font-size:12px;margin:6px 0;min-height:18px}footer{font-size:10px;line-height:1.8;color:#87917f;margin:22px 0}footer a{color:#65765b}footer p{font-size:10px}details{font-size:11px;color:#7c8572}summary{cursor:pointer}.references{margin-top:15px}.references>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.references figure{margin:0}.references img{width:100%;border-radius:12px}.references figcaption{font-size:10px;margin:6px 0} @media(min-width:1500px){.stage{max-height:580px}}@media(max-width:1050px){main{gap:4%;padding:30px 4%}.swatches{grid-template-columns:repeat(7,minmax(0,1fr))}h1{font-size:36px}}@media(max-width:700px){header{height:76px;padding:18px 6%}.brand{font-size:20px}.badge{font-size:8px;padding:7px 8px;letter-spacing:1px}main{display:block;padding:30px 6%}.preview{position:static}.intro h1{font-size:34px}.intro p{font-size:12px}.stage{margin-top:22px}.config{margin-top:36px}.swatches{grid-template-columns:repeat(7,minmax(0,1fr))}.chosen{max-width:48%;text-align:right;font-size:11px}.result{padding:22px}.stage-label{top:14px;left:14px}h1{letter-spacing:-1.6px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,transform .15s}.swatch:hover{transform:translateY(-2px)}}
.return-store{margin-top:24px}.return-store label{display:block;margin:16px 0 7px;font-size:14px}.return-store select{width:100%;min-height:48px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}.return-store a.primary{display:block;margin:18px 0;padding:16px;text-decoration:none;overflow-wrap:anywhere}.return-store a[hidden]{display:none}.return-store .notice{font-size:12px}.return-store>a:not(.primary){font-size:13px;color:var(--accent)}
/* Keep the whole preview in view while the option panel scrolls. */
@media(min-width:701px){.intro h1{font-size:30px;letter-spacing:-1px;margin:12px 0 6px}.intro h1 br{display:none}.intro p{margin:8px 0}.stage{width:min(100%,calc(100vh - 320px));margin:20px auto 0}.swatches{grid-template-columns:repeat(8,minmax(0,1fr))}.preview:has(.references[open]){position:static}}
@media(min-width:701px) and (max-width:1050px){.swatches{grid-template-columns:repeat(6,minmax(0,1fr))}}
#mobile-preview{display:none}@media(max-width:700px){#mobile-preview:not([hidden]){position:fixed;inset:0 0 auto;z-index:5;display:flex;gap:18px;align-items:center;padding:10px 6%;background:#f6f5eef5;border-bottom:1px solid #d6dccb;box-shadow:0 4px 14px #28362614;backdrop-filter:blur(12px)}#mini{width:100px;height:100px;background:#e8eade;border-radius:10px}#mini-label{margin:5px 0;font-size:12px}#back-preview{border:0;background:transparent;color:#405444;font-size:11px;padding:4px 0;text-decoration:underline}.option button{scroll-margin-top:135px}}
:root{--store-banner-height:84px}.store-banner{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:16px;min-height:var(--store-banner-height);padding:16px 5%;background:#086637;color:#fff;text-decoration:none;box-shadow:0 3px 12px #153c251f}.store-banner:hover{background:#07552e}.store-banner:focus-visible{outline:3px solid #e7b963;outline-offset:-5px}.store-banner-icon{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:9px;background:#fff;color:#086637;font-size:23px;font-weight:900}.store-banner-copy strong{display:block;font-size:18px;line-height:1.5;letter-spacing:-.4px}.store-banner-copy small{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:#def4e7}.store-banner-arrow{font-size:28px;margin-left:14px}.preview{top:calc(var(--store-banner-height) + 20px)}@media(max-width:600px){.store-banner{gap:10px;padding:12px 16px}.store-banner-copy strong{font-size:14px}.store-banner-copy small{font-size:10px;max-width:255px}.store-banner-arrow{font-size:23px;margin-left:0}.store-banner-icon{width:28px;height:28px;font-size:19px}}