@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#233f38;--muted:#7b8379;--paper:#f7f6f0;--line:#e3e5db;--green:#254e43;--lime:#dbe9ac}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #c89749;outline-offset:3px}header{height:104px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%;gap:25px;background:#fbfaf6}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:700 25px 'Manrope',sans-serif;letter-spacing:-1px}.brandmark{font-size:49px;line-height:1}.brand small{font:8px 'DM Sans',sans-serif;letter-spacing:1.7px;display:block;margin-top:5px}.badge{border:1px solid #cdd9c2;border-radius:30px;padding:8px 11px;font-size:9px;letter-spacing:1.4px}nav{display:flex;gap:30px}.nav{background:none;border:0;padding:13px 0;font-size:13px;color:#7a837b}.nav.active{color:var(--ink);border-bottom:2px solid var(--green)}main{max-width:1600px;margin:auto;padding:36px 4%}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#71806c;margin:0 0 12px}h1{font:500 clamp(28px,3vw,44px) 'Manrope',sans-serif;letter-spacing:-1.9px;margin:0 0 10px}p{line-height:1.7}.intro p:last-child{margin:0;color:var(--muted)}button{transition:background .18s,transform .18s}button:hover:not(:disabled){filter:brightness(.96)}.secondary,.primary{border-radius:8px;padding:13px 19px;border:1px solid #ccd3c5;background:transparent}.primary{background:var(--green);color:#fff;border-color:var(--green)}.wide{width:100%;margin-top:15px}.workspace{display:grid;grid-template-columns:245px minmax(280px,1fr) 258px;gap:18px;align-items:start}.panel{background:#fffefa;border:1px solid var(--line);border-radius:13px;padding:20px}.panel-title{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:18px}.panel-title span{color:#8f9b88;font-size:11px}.tabs,.toggle{display:flex;background:#f0f1e9;border-radius:7px;padding:4px;gap:4px}.tabs button,.toggle button{flex:1;border:0;background:transparent;border-radius:5px;font-size:12px;padding:8px}.tabs .selected,.toggle .selected{background:white;box-shadow:0 1px 3px #0001;color:var(--green)}label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;margin:22px 0 10px}label span,output{color:#8c9389;font-size:10px;font-weight:400}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:25px;height:25px;border-radius:50%;border:2px solid #fff;outline:1px solid #ddd}.swatch.active{outline:2px solid var(--green);outline-offset:2px}.custom-color{display:flex;align-items:center;gap:9px;color:#7e887c;font-size:11px;margin:15px 0}input[type=color]{width:27px;height:27px;border:0;padding:0;background:transparent;cursor:pointer}input[type=range]{width:100%;accent-color:var(--green);height:5px;display:block;margin-bottom:20px}.hint{font-size:11px;color:#8a9387;line-height:1.65;margin:12px 0}.divider{height:1px;background:var(--line);margin:19px 0}.palettes{display:flex;gap:7px}.palette{display:flex;padding:6px;border:1px solid var(--line);border-radius:6px;background:transparent}.palette i{width:14px;height:19px;display:block}.palette i:first-child{border-radius:4px 0 0 4px}.palette i:last-child{border-radius:0 4px 4px 0}.canvas-panel{background:#eceee4;border:1px solid #dfe4d6;border-radius:13px;overflow:hidden;min-width:0}.canvas-top,.canvas-bottom{display:flex;align-items:center;justify-content:space-between;padding:17px 21px}.canvas-top>span{font-size:9px;letter-spacing:1.6px;color:#84907c}.live-dot{display:inline-block;width:5px;height:5px;background:#829a64;border-radius:50%;margin-right:7px}.icon{border:0;background:#ffffff70;width:29px;height:29px;border-radius:5px;font-size:20px;margin-left:3px}.stage{background:radial-gradient(ellipse at center,#f7f6e8 0%,#eceee4 72%);display:flex;justify-content:center;align-items:center;aspect-ratio:1.08;max-height:610px}.stage.flat{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#art{width:100%;height:100%;max-height:580px;touch-action:none;user-select:none}.canvas-bottom{gap:10px;padding-top:10px}.canvas-bottom>span{font-size:10px;color:#8c9586}.toggle button{font-size:10px;white-space:nowrap}.preview-note{text-align:center;font-size:10px;color:#8a9280;margin:0;padding:10px 20px 20px}.layers .hint{margin-top:-6px}#layerList{max-height:275px;overflow-y:auto;margin:18px -6px 0}.layer{display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:7px;padding:9px 7px;margin-bottom:4px}.layer.active{background:#eef2e4;border-color:#d5dfc8}.layer .select{display:flex;align-items:center;gap:9px;border:0;background:transparent;text-align:left;flex:1;padding:0;min-width:0}.layer-dot{border-radius:50%;width:22px;height:22px;flex-shrink:0;border:1px solid #0001}.layer strong{font-size:11px;font-weight:500;display:block}.layer small{font-size:9px;color:#929a8c}.eye{border:0;background:transparent;font-size:14px;padding:3px}.layer-actions{display:flex;gap:4px;margin-top:12px}.layer-actions button{border:1px solid var(--line);background:transparent;border-radius:5px;font-size:10px;padding:7px;flex:1}input[type=text]{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;padding:10px;color:var(--ink)}.exports{display:grid;grid-template-columns:1fr 1fr;gap:8px}.exports button{background:none;border:1px solid var(--line);padding:9px 4px;font-size:10px;border-radius:5px}.text-button{display:block;margin:18px auto 0;border:0;background:transparent;font-size:10px;color:#8a9385}.starter-section{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:44px 0 15px;align-items:center}.starter-section h2{font:500 23px 'Manrope',sans-serif;letter-spacing:-.6px;margin:0}.starter-section p:last-child{color:#87907f;font-size:12px}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.starter{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fffefa;text-align:left;padding:0}.starter svg{display:block;width:100%;height:130px;background:#e9ecdf}.starter span{display:block;padding:12px 14px;font-size:12px}.starter span b{float:right;font-weight:400}.collection-intro{text-align:center;padding:42px 0 30px}.collection-intro>p:last-child{color:var(--muted)}.empty-collection{max-width:650px;margin:20px auto 80px;text-align:center;border:1px dashed #b8c6ab;padding:50px;border-radius:20px}.empty-collection>span{font-size:75px;color:#aaad78}.empty-collection p{color:var(--muted)}.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0}.journey article{background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:25px}.journey b{font-size:35px;font-weight:400;color:#a4b18b}.journey h2{font-size:18px}.journey p{color:var(--muted);font-size:13px}.journey span{font-size:10px;background:#edf0e4;padding:7px 12px;border-radius:20px}.notice{text-align:center;color:#8a9387;font-size:12px;margin:40px}footer{margin:20px 4% 0;padding:24px 0;display:flex;justify-content:space-between;border-top:1px solid var(--line);color:#89927f;font-size:11px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:13px 25px;border-radius:9px;box-shadow:0 6px 30px #0002;opacity:0;pointer-events:none;z-index:5;transition:opacity .2s;max-width:90%;text-align:center}#toast.show{opacity:1}[hidden]{display:none!important}@media(min-width:1500px){.workspace{grid-template-columns:270px minmax(280px,1fr) 280px}.stage{aspect-ratio:1.12}}@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(250px,1fr)}.layers{grid-column:1/-1}.layers #layerList{display:flex;max-height:180px;flex-wrap:wrap}.layer{min-width:170px}.layers .exports{grid-template-columns:repeat(4,1fr)}header{padding:0 3%}.badge{display:none}.starter-section{grid-template-columns:1fr}.journey{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){header{height:auto;padding:20px 5% 0;display:block}.brand{font-size:22px}.brandmark{font-size:38px}nav{justify-content:space-between;gap:10px;margin-top:18px}.nav{font-size:11px}main{padding:25px 4%}.intro{align-items:flex-start;gap:12px}.intro h1{font-size:29px}.intro p:last-child{font-size:12px}.intro .secondary{font-size:10px;padding:10px;min-width:85px}.eyebrow{font-size:8px}.workspace{display:flex;flex-direction:column;gap:14px}.canvas-panel{width:100%;order:-1}.panel{width:100%;padding:18px}.tools{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.tools .panel-title,.tools .tabs,.tools .divider,.tools .palettes,.tools>.hint{grid-column:1/-1}.tools>label,.tools>.swatches,.tools>.custom-color,.tools>input,.tools>#ringControls,.tools>#brushControls,.tools>.wide{grid-column:1/-1}.swatches{gap:13px}.tools label{margin-top:15px}.stage{max-height:430px}.canvas-top,.canvas-bottom{padding:12px}.preview-note{font-size:9px}.starter svg{height:100px}.starter span{padding:10px;font-size:10px}.journey{grid-template-columns:1fr}.empty-collection{padding:30px}.collection-intro h1{font-size:32px}footer{font-size:9px}.canvas-top>span{font-size:8px}}
@media(max-width:650px){#detailControls{grid-column:1/-1}}
/* Keep the live artwork visible while mobile controls scroll underneath. */
@media(max-width:650px){
  .canvas-panel{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;flex-shrink:0;box-shadow:0 7px 18px #233f3820;}
  .canvas-panel .stage{height:clamp(140px,29svh,250px);max-height:none;aspect-ratio:auto;}
  .canvas-panel #art{height:100%;width:auto;max-width:100%;aspect-ratio:1;}
  .canvas-top{padding:7px 12px;}
  .canvas-bottom{padding:5px 12px 8px;}
  .canvas-panel .preview-note{display:none;}
  .tools,.layers{scroll-margin-top:calc(29svh + 90px);}
}
@media(max-width:650px) and (max-height:500px){
  .canvas-panel .stage{height:26svh;min-height:80px;}
  .canvas-panel .canvas-top{display:none;}
}

@media(max-width:650px){#offsetActions{grid-column:1/-1}}

.preview-actions{display:flex;align-items:center;gap:3px}.new-stone{border:1px solid #bdcbb5;background:#fffefa;border-radius:6px;padding:7px 10px;font-size:11px;white-space:nowrap;font-weight:600}@media(max-width:650px){.canvas-top>span{font-size:7px;letter-spacing:.6px}.new-stone{padding:7px 8px;font-size:10px}}@media(max-width:650px) and (max-height:500px){.canvas-panel .canvas-top{display:flex}}

#armColors{display:grid;grid-template-columns:1fr 1fr;gap:8px}.arm-color{margin:0;padding:7px;background:#f0f1e9;border-radius:6px;justify-content:flex-start;gap:7px}.arm-color span{font-size:10px;color:var(--ink)}.tabs button{padding:8px 4px;font-size:11px}@media(max-width:650px){#spiralControls{grid-column:1/-1}#armColors{grid-template-columns:repeat(3,1fr)}}

.exact-angle{display:flex;align-items:flex-end;gap:5px;margin:8px 0 12px}.exact-angle label{display:block;margin:0;flex:1;font-size:9px;min-width:0}.exact-angle input{display:block;width:100%;min-width:0;padding:9px 5px;border:1px solid #ccd3c5;border-radius:6px;font-size:16px;color:var(--ink);background:#fffefa;margin-top:5px}.exact-angle button{border:1px solid #ccd3c5;border-radius:6px;padding:10px 7px;background:#fffefa;font-size:11px;min-height:40px}@media(max-width:650px){.exact-angle{grid-column:1/-1}.exact-angle button{min-width:50px}}

.tools>.tabs{display:grid;grid-template-columns:1fr 1fr}@media(max-width:650px){#swooshControls{grid-column:1/-1}}

@media(max-width:650px){#blendControls{grid-column:1/-1}}

#haloColors{display:grid;grid-template-columns:1fr 1fr;gap:7px}#haloDetails{padding:8px 0;border-bottom:1px solid var(--line)}@media(max-width:650px){#haloDetails{grid-column:1/-1}}

.blend-toggle{justify-content:flex-start;gap:9px;cursor:pointer}.blend-toggle input{accent-color:var(--green);width:17px;height:17px;margin:0}@media(max-width:650px){.blend-toggle{grid-column:1/-1}}

#designGallery{width:min(760px,94vw);max-height:85svh;border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--paper);color:var(--ink)}#designGallery::backdrop{background:#152d2877}.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.gallery-heading h2{margin:0}#savedDesigns{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}.saved-card{border:1px solid var(--line);border-radius:10px;background:#fffefa;padding:10px;text-align:left;min-width:0}.saved-card svg{width:100%;display:block}.saved-card strong,.saved-card small{display:block;overflow-wrap:anywhere}.saved-card small{margin-top:6px;color:var(--muted)}@media(max-width:650px){.canvas-top>span{display:none}.preview-actions{width:100%;justify-content:flex-end}}