:root{
  --bg:#fdebdc; --card:#f8dcca; --ink:#5b3f35; --ink2:#7a5d52;
  --accent:#d98073; --chip:#f3c6b5; --ring:#fff3ea; --shadow:0 6px 20px rgba(0,0,0,.06);
}
*{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial}
a{color:inherit;text-decoration:none}
h1,h2{margin:.2rem 0 1rem;color:var(--ink)}
.theme-peach{background:var(--bg);color:var(--ink)}
.container{max-width:980px;margin:1.5rem auto;padding:0 1rem}

/* header */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;background:var(--bg);border-bottom:1px solid #efcdbd}
.brand{display:flex;align-items:center;gap:.6rem}.brand__logo{width:38px;height:38px;border-radius:6px}.brand__name{font-weight:700;letter-spacing:.08em}
.nav{margin-left:auto;display:flex;gap:1rem}.nav a{opacity:.85}.nav a:hover{opacity:1}

/* buttons */
.btn,.btn-outline,.chip{border-radius:22px;padding:.55rem .95rem;border:1px solid #d8b3a6;background:#fffaf6;color:var(--ink);cursor:pointer}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.chip{background:var(--chip)} .chip--seg{background:var(--ring);border:1px solid #e7c7b7;padding:.45rem .8rem}
.is-active{outline:2px solid var(--accent)}
.btnbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0}
input[type="range"]{width:100%}
.hint{opacity:.75;font-size:.9rem}

/* ---------- Canvas stack fixes ---------- */
.canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border:1px dashed #d9b8a8;border-radius:16px;overflow:hidden}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#imgCanvas{z-index:0}
#maskCanvas{z-index:1;pointer-events:auto;opacity:.45;mix-blend-mode:multiply}
#textCanvas{z-index:2;pointer-events:auto}

/* mask visibility class (JS toggles .is-hidden) */
.is-hidden{opacity:0!important}

/* ---------- Hoop preview ---------- */
.hoop{position:relative;margin-top:12px}
.hoop__svg{width:100%;height:auto;display:block}
.hoop__inner{position:absolute;inset:90px 90px;display:grid;place-items:center}
.hoop__inner canvas{width:100%;height:100%;background:#fff;border-radius:24px}

/* ---------- Buttons wrap nicely on small screens ---------- */
.btnbar, .exportbar .btnbar{display:flex;flex-wrap:wrap;gap:.5rem}
.btn, .chip{white-space:nowrap}

/* ---------- Hero & inset placement ---------- */
.hero{padding:1rem}
.hero__grid{position:relative}
.hero__copy h1{font-size:clamp(1.9rem,3.8vw,3.2rem);margin:.2rem 0 .6rem}
.hero__example{margin:.75rem 0 1rem;border-radius:18px;overflow:hidden}
.hero__example img{display:block;width:100%;height:auto}
.hero__inset{position:absolute;top:10%;right:6%;width:min(34vw,240px)}
.hero__inset img{display:block;width:100%;height:auto;border-radius:50%;box-shadow:0 6px 24px rgba(0,0,0,.15);border:10px solid #fff}

@media (max-width:720px){
  .hero__inset{top:12%;right:7%;width:160px}
}

/* hero */
.hero{max-width:1200px;margin:1rem auto;padding:0 1rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.hero__title{font-size:clamp(28px,4.2vw,56px);line-height:1.05;margin-bottom:.6rem}
.hero__lead{opacity:.85;max-width:48ch}
.hero__example{width:100%;border-radius:16px;margin:.75rem 0 1rem;box-shadow:var(--shadow)}
.hero__bubble{position:relative;width:52%;margin-left:auto}
.hero__bubble--lower{margin-top:1.2rem} /* moved down a bit */
.hero__bubble>img{width:100%;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.12);outline:10px solid rgba(255,255,255,.9)}
@media (max-width:980px){.hero{grid-template-columns:1fr}.hero__bubble{width:44%}}

/* cards & editor */
.card{background:var(--card);border:1px solid #efcdbd;border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
.card__title{font-size:1.25rem;margin-bottom:.75rem}
.mt{margin-top:1rem}
.editor{max-width:1200px;margin:1rem auto;padding:0 1rem}
.tools-inline{margin:.5rem 0}
.seg{display:flex;gap:.5rem;flex-wrap:wrap}
.panel{margin:.5rem 0}.hidden{display:none!important}
.row{display:flex;align-items:center;gap:.6rem;margin:.4rem 0}.row--stack{flex-wrap:wrap}.row--check{gap:.5rem}

.canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border:1px dashed #d9b8a8;border-radius:16px;overflow:hidden}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
#maskCanvas{mix-blend-mode:multiply;opacity:.45}
#textCanvas{pointer-events:auto}

/* machine hoop frame (preview only) */
.preview-hoop{position:relative;background:#fff;border-radius:18px;padding:18px;border:1px dashed #d9b8a8}
.preview-hoop::before{
  content:""; position:absolute; inset:10px; border-radius:18px;
  border:10px solid rgba(70,70,70,.9); /* outer rail */
  pointer-events:none;
}
.preview-hoop::after{
  content:""; position:absolute; inset:24px; border-radius:14px;
  border:4px solid rgba(170,170,170,1); /* inner rail */
  pointer-events:none;
}
.preview-hoop canvas{width:100%;height:min(70vh,520px);display:block}

/* sticky export */
.exportbar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;margin-top:1rem;background:linear-gradient(180deg,rgba(253,235,220,0),var(--bg) 24%);border-top:1px solid #efcdbd}
.exportbar .btnbar{margin:0}

/* keep your previous styles; add/override the following */

.canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border:1px dashed #d9b8a8;border-radius:16px;overflow:hidden}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
#maskCanvas{mix-blend-mode:multiply;opacity:.45}
#textCanvas{pointer-events:auto}

.tools-inline .panel.hidden{display:none}
.hoop{position:relative;background:transparent}
.hoop__svg{width:100%;height:auto;display:block}
.hoop__inner{position:absolute;inset:90px 90px;display:grid;place-items:center}
.hoop__inner canvas{width:100%;height:100%;background:#fff;border-radius:24px}

@media (max-width:600px){
  .btnbar .btn,.btnbar .chip{font-size:.95rem}
  .seg .chip{margin-bottom:.25rem}
}

/* collapsible options */
.opts{margin-bottom:.5rem}
.opts summary{cursor:pointer;font-weight:600}
.opts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-top:.6rem}