@font-face{font-family:Sophia;src:url('assets/SophiaRonald.otf')}*{box-sizing:border-box}body{margin:0;background:#fbf8f5;color:#403631;font-family:Arial,sans-serif;font-size:14px}header{height:88px;border-bottom:1px solid #e7dfd9;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{font-size:19px;letter-spacing:3px;color:inherit;text-decoration:none}.brand span{display:block;font-size:8px;letter-spacing:3px;padding:7px 0 0 32px}.header-note{font-family:Georgia,serif;font-style:italic;color:#88766a}main{max-width:1280px;margin:auto;padding:50px 38px 60px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#9b6d5d}h1{font:normal 54px/1.1 Georgia,serif;margin:15px 0} .intro p{color:#897b73;margin:0 0 35px;font-size:15px}.workspace{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}.preview-panel{position:sticky;top:24px;background:#efe6e0;border-radius:160px 160px 12px 12px;overflow:hidden;padding:36px 28px 22px}.preview-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;margin:12px 20px 0}.live{letter-spacing:0;text-transform:none;color:#716f59}.live i{display:inline-block;width:6px;height:6px;background:#8b957a;border-radius:50%;margin-right:5px}.stage{height:485px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#fff8 0%,transparent 68%)}svg{width:94%;height:100%;overflow:visible}#art{filter:drop-shadow(2px 5px 3px #67524025)}#nameArt,#nameArt2{paint-order:stroke;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.preview-caption{text-align:center;letter-spacing:2px;font-size:9px;margin:10px 0 17px}.disclaimer{font-size:11px;line-height:1.7;text-align:center;color:#897a70;max-width:350px;margin:auto}.step{display:flex;gap:13px;align-items:center;margin-bottom:20px}.number{border:1px solid #c9b4a8;color:#9d7767;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:10px}h2{font:normal 24px Georgia,serif;margin:0}label{display:block;font-size:12px;margin-bottom:9px}input{width:100%;border:1px solid #dfd5cd;border-radius:6px;background:#fffdfb;padding:13px 14px;font:inherit;color:inherit}input:focus{outline:2px solid #b69080;outline-offset:2px}#name{font-size:17px}.input-note{display:flex;justify-content:space-between;font-size:10px;color:#93847c;margin-top:9px}.colors-title{margin-top:30px}.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.layer{border:1px solid #e0d6cd;border-radius:7px;padding:12px 9px;background:transparent;display:flex;align-items:center;gap:9px;text-align:left;color:inherit;cursor:pointer;min-width:0}.layer.active{border-color:#9c7563;background:#f2e8df;box-shadow:0 0 0 1px #9c7563}.dot{width:25px;height:25px;flex-shrink:0;border-radius:50%;background-size:cover;border:1px solid #0001}.layer small{display:block;font-size:9px;line-height:1.4;margin-top:4px;color:#87766d}.material-header{display:flex;justify-content:space-between;align-items:center;margin-top:25px;font-size:11px}.material-header label{font-size:9px;letter-spacing:1.5px;margin:0}#search{margin:12px 0;font-size:12px;padding:10px 12px}.filters{display:flex;gap:5px;margin-bottom:15px;flex-wrap:wrap}.filters button{background:none;border:0;color:#89786d;font-size:11px;padding:7px 12px;border-radius:18px;cursor:pointer}.filters button.active{background:#443d37;color:white}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:10px 8px;max-height:280px;overflow-y:auto;padding:4px 5px 5px 2px}.swatch{border:0;background:none;padding:0;color:inherit;cursor:pointer;min-width:0}.swatch img{width:100%;aspect-ratio:1;border-radius:5px;display:block;border:2px solid transparent;padding:1px}.swatch.selected img{border-color:#564338;box-shadow:0 0 0 1px #564338}.swatch span{font-size:8px;line-height:1.2;display:block;margin-top:4px;min-height:20px}.finish-note{font-size:10px;line-height:1.5;color:#8b7a70;min-height:16px}.order{margin-top:25px;padding-top:25px;border-top:1px solid #e4d9d0}.order p{font-size:12px;line-height:1.7;color:#86756a}.order textarea{width:100%;resize:none;border:0;background:#f1ebe5;border-radius:6px;padding:13px;font:11px/1.7 Arial;color:#716158}.primary{display:flex;justify-content:space-between;width:100%;padding:16px 20px;background:#574b40;color:#fff;border:0;border-radius:6px;margin-top:12px;cursor:pointer;font-size:13px}.primary:hover{background:#75604f}.primary:disabled{opacity:.5;cursor:default}#status{min-height:18px;margin-bottom:0}footer{padding:25px 5vw;border-top:1px solid #e7dfd9;color:#998c81;font-size:11px;display:flex;justify-content:space-between}button:focus-visible{outline:2px solid #856453;outline-offset:3px}@media(min-width:1400px){.stage{height:550px}}@media(max-width:850px){main{padding:30px 20px}.workspace{gap:28px;grid-template-columns:1fr}.preview-panel{position:relative;top:0;border-radius:100px 100px 12px 12px}.stage{height:380px}h1{font-size:41px}.header-note{display:none}header{height:75px}.swatches{grid-template-columns:repeat(8,1fr);max-height:310px}footer span{display:none}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}

/* Muted rose and warm taupe reduce the brightness of the preview workspace. */
body{background:#d8c6c0;color:#3d302d}header,footer{border-color:#bca6a0}.header-note,.intro p{color:#6a5550}.eyebrow{color:#79544a}.preview-panel{background:#c9b2a8}.stage{background:radial-gradient(ellipse,#eee0d92e 0%,transparent 68%)}input{background:#e9dcd6;border-color:#bfa9a0}.input-note,.layer small,.finish-note,.order p{color:#6b5750}.layer{border-color:#b99f94}.layer.active{background:#e1ccc0;border-color:#795c4b;box-shadow:0 0 0 1px #795c4b}.filters button{color:#614d44}.order{border-color:#bca49a}.order textarea{background:#cbb7ad;color:#44372f}footer{color:#6e5850}.etsy-card{text-align:center;padding:14px 0 5px;border-top:1px solid #af93865c}.etsy-eyebrow{font-size:9px;letter-spacing:2px;color:#70574b}.etsy-card h2{margin:10px 0 5px;font-size:27px}.etsy-card p{font-size:12px;color:#685146;margin:0 0 13px}.etsy-placeholder{display:inline-block;font-size:11px;padding:11px 17px;border:1px solid #aa8e7d;border-radius:20px;color:#614a3b}

.color-family{grid-column:1 / -1;font:600 11px Arial,sans-serif;letter-spacing:.5px;margin:10px 0 3px;padding:8px 0;border-bottom:1px solid #bfa49a;color:#634b42}.color-family:first-child{margin-top:0}

header{height:64px}main{padding-top:24px}.eyebrow{font-size:9px;letter-spacing:1.7px}h1{font-size:42px;margin:9px 0}.intro p{margin-bottom:22px;font-size:14px}.second-line-label{margin-top:16px}.second-line-label span{color:#796258;font-size:11px}#name2{font-size:17px}.colors-title{margin-top:24px}@media(max-width:850px){header{height:58px}main{padding-top:20px}h1{font-size:35px}.intro p{margin-bottom:20px}}

.draft-bar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px;font-size:11px;color:#6b5750}.draft-bar button{flex-shrink:0;border:1px solid #9e8174;border-radius:5px;padding:8px 11px;background:transparent;color:#554035;cursor:pointer}.draft-bar button:hover{background:#e9dcd6}

.size-rulers{color:#604b43;pointer-events:none}.size-rulers line{stroke:currentColor;stroke-width:1;opacity:.32}.size-rulers .extension{opacity:.18;stroke-dasharray:3 4}.size-rulers text{fill:currentColor;opacity:.7;font:12px Arial,sans-serif;letter-spacing:.5px}

#nameLayer{filter:drop-shadow(1px 2px 1px #49352940)}
h1{font-size:clamp(29px,3.5vw,42px)}.swatches{grid-template-columns:repeat(5,minmax(0,1fr));max-height:365px;gap:14px 10px}.swatch span{font-size:12px;line-height:1.35;min-height:32px}.layer small{font-size:11px}.material-header{gap:12px}#selectedLabel{font-size:12px}.preview-disclaimer{font-size:12px;line-height:1.6;text-align:center;color:#604b43;margin:0 auto 18px;max-width:390px}.etsy-card a{color:inherit;text-decoration:none}.etsy-card h2{font-size:25px}.etsy-placeholder:hover{background:#dfcbc0}.primary{text-decoration:none}.order li{font-size:14px;line-height:1.65;margin-bottom:12px}.order ol{padding-left:21px}.gallery{margin-top:48px;border-top:1px solid #bca49a;padding-top:28px}.gallery h2{font-size:32px;margin:9px 0}.gallery>p{color:#6b5750;line-height:1.6}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.photo-grid a{color:inherit;text-decoration:none}.photo-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;display:block}.photo-grid span{display:block;margin-top:9px;font-size:13px}.photo-grid a:focus-visible{outline:2px solid #795c4b;outline-offset:5px}@media(max-width:600px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}.swatch span{font-size:12px}.preview-panel{padding-left:18px;padding-right:18px}.gallery h2{font-size:28px}}

/* Compact controls keep more of the design visible on arrival. */
header{height:50px}.brand{font-size:16px}.brand span{font-size:7px;padding-top:4px}main{padding-top:16px}.eyebrow{font-size:8px}h1{font-size:clamp(26px,3vw,35px);margin:7px 0}.intro p{font-size:13px;margin-bottom:16px}.draft-bar{margin-bottom:12px}.step{margin-bottom:12px}#name,#name2{padding:9px 12px;font-size:15px}.second-line-label{margin-top:10px}.input-note{margin-top:5px}.colors-title{margin-top:17px}.swatches{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px 9px;max-height:320px}.swatch span{font-size:11px;font-weight:700;line-height:1.3;min-height:29px}.layer small{font-weight:700}.preview-panel{padding-top:24px}.preview-top{margin-top:8px}@media(max-width:850px){header{height:48px}main{padding-top:14px}.swatches{grid-template-columns:repeat(7,minmax(0,1fr))}}@media(max-width:600px){.swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 7px}.swatch span{font-size:10px}h1{font-size:27px}.header-note{display:none}}

.brand-lockup{display:flex;align-items:center;gap:12px}.brand{display:block;width:42px;height:42px;overflow:hidden;border-radius:9px;flex-shrink:0}.brand img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}.tool-name{font-size:13px;letter-spacing:.3px}.tool-name span{display:block;font-size:9px;letter-spacing:0;margin-top:3px;color:#725950}@media(max-width:600px){.brand{width:38px;height:38px}.tool-name{font-size:12px}.brand-lockup{gap:9px}}
#outline{filter:drop-shadow(.65px 1.2px .7px #49352930)}

.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.name-fields label{margin-bottom:5px;font-size:11px}.name-fields label span{font-size:10px;color:#725950}.name-fields #name,.name-fields #name2{padding:7px 10px;font-size:14px}.field-count{display:block;text-align:right;margin-top:3px;font-size:9px;color:#725950}.name-fields+.input-note{margin-top:1px}.colors-title{margin-top:14px}.swatches{grid-template-columns:repeat(8,minmax(0,1fr))}.selection-summary{margin:18px 0 12px}.selection-summary h3{font:600 14px Arial;margin:0 0 9px}#selectionText{white-space:pre-line;font-size:13px;line-height:1.8;user-select:text}.selection-summary button{margin-top:10px;padding:7px 11px;background:transparent;border:1px solid #9e8174;border-radius:5px;color:#554035;cursor:pointer}.order .transfer-note{font-size:11px;margin:9px 0}@media(max-width:600px){.swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px 5px}.swatch span{font-size:9px;overflow-wrap:anywhere}.name-fields{gap:9px}}

footer{gap:16px;flex-wrap:wrap}.support summary{cursor:pointer;font-weight:600}.support p{margin:8px 0}.support a{color:inherit}.support{font-size:11px}
h1{font-size:clamp(23px,2.4vw,28px)}header{height:62px}.brand{width:54px;height:54px;border-radius:11px}.tool-name{font-size:16px}.tool-name span{font-size:10px}@media(max-width:600px){header{height:58px}.brand{width:48px;height:48px}.tool-name{font-size:14px}.tool-name span{font-size:9px}h1{font-size:24px}}

.etsy-transfer-guide{display:grid;gap:10px;margin:14px 0}.etsy-transfer-guide>div{padding:12px 14px;background:#e4d3cb;border-radius:7px;border-left:3px solid #8b7465}.etsy-transfer-guide strong{font-size:13px}.order .etsy-transfer-guide p{margin:5px 0 0;font-size:12px;color:#59473f}.selection-summary button{font-weight:600}

.preset-section{margin:0 0 15px}.preset-section h3{font-size:11px;font-weight:600;margin:0 0 8px;color:#6b5750}.presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.presets button{min-width:0;border:1px solid #b99f94;border-radius:7px;background:#ddcbc3;padding:5px 5px 7px;cursor:pointer;color:#554035}.presets button[aria-pressed="true"]{border-color:#795c4b;box-shadow:0 0 0 1px #795c4b;background:#eadbd1}.presets svg{width:100%;height:64px;display:block;overflow:hidden}.presets span{font-size:10px;font-weight:600;display:block;line-height:1.3}.presets button:hover{background:#eadbd1}@media(max-width:600px){.presets{gap:5px}.presets svg{height:53px}.presets span{font-size:9px}}

.name-fields{grid-template-columns:1fr}.draft-bar{justify-content:flex-end}.intro{margin-bottom:16px}.transfer-note:empty{display:none}

.layer-heading{font-size:14px;font-weight:700;margin:16px 0 10px;color:inherit}

/* Phone layout: readable controls and a compact, persistent design preview. */
@media(max-width:600px){
 main{padding:12px 14px 32px}
 header{padding:0 14px}
 .brand-lockup{min-width:0}
 .tool-name{font-size:13px}
 h1{font-size:23px;line-height:1.2}
 .intro{margin-bottom:12px}
 .workspace{display:flex;flex-direction:column;gap:18px}
 .preview-panel{position:sticky;top:0;z-index:10;width:100%;border-radius:16px;padding:8px 12px;box-shadow:0 4px 12px #49352920}
 .stage{height:180px;height:clamp(140px,25svh,200px)}
 .preview-disclaimer{font-size:10px;line-height:1.35;margin:3px auto 0;max-width:340px}
 .preview-panel .etsy-card{display:none}
 .controls{width:100%;min-width:0}
 .name-fields #name,#search{font-size:16px;min-height:44px}
 .name-fields label{font-size:13px}
 .input-note,.field-count{font-size:11px}
 .draft-bar button,.selection-summary button,.filters button{min-height:44px}
 .layers{gap:6px}
 .layer{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 8px;min-height:82px;font-size:14px}
 .layer small{font-size:11px;overflow-wrap:anywhere}
 .dot{width:24px;height:24px}
 .layer-heading{font-size:16px}
 .material-header{align-items:flex-start}
 .material-header label{font-size:11px}
 #selectedLabel{text-align:right}
 .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;max-height:none;overflow:visible;padding:4px}
 .swatch span{font-size:12px;line-height:1.35;min-height:32px;overflow-wrap:normal}
 .filters{gap:4px}
 .filters button{font-size:12px;padding:8px 12px}
 .preset-section h3{font-size:13px}
 .presets svg{height:64px}
 .primary{min-height:48px;align-items:center;font-size:14px;gap:12px}
 #selectionText{font-size:14px}
 .order{scroll-margin-top:260px}
 .gallery{margin-top:28px}
 footer{padding:20px 14px}
}
@media(max-width:600px) and (max-height:500px){
 .preview-panel{position:relative}
 .stage{height:180px}
}