/* Design your nails */
.dz-section{padding-top:8px}
.dz-note{background:#fff;border:var(--line);border-left:10px solid var(--accent);border-radius:14px;padding:12px 16px;margin:0 0 16px}
.dz-grid{display:grid;gap:18px}
@media(min-width:900px){.dz-grid{grid-template-columns:minmax(300px,440px) 1fr;align-items:start}.dz-stage{position:sticky;top:12px}}
.dz-stage,.dz-panel{background:#fff;border:var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--pop);min-width:0}
.dz-hand-wrap{position:relative;max-width:420px;margin:0 auto}
.dz-hand-wrap canvas{width:100%;height:auto;aspect-ratio:1000/1100;display:block;background:#fff6fa;border-radius:12px;cursor:pointer;touch-action:manipulation}
.dz-badge{position:absolute;top:8px;left:8px;background:var(--ink);color:#fff;border-radius:999px;font:800 .72rem var(--font-body);padding:4px 10px;letter-spacing:.04em;text-transform:uppercase;z-index:1}
.dz-nailtabs,.dz-bar,.dz-opts,.dz-copyrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.dz-chip,.dz-btn,.dz-opt,.dz-tab{min-height:44px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:6px 14px;font:800 .9rem var(--font-body);cursor:pointer}
.dz-chip.on,.dz-opt.on,.dz-tab.on{background:var(--ink);color:#fff}
.dz-btn:disabled{opacity:.4;cursor:not-allowed}
.dz-chip:focus-visible,.dz-btn:focus-visible,.dz-opt:focus-visible,.dz-tab:focus-visible,.dz-swatch:focus-visible,.dz-ic:focus-visible,.dz-preset:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.dz-send-link{width:100%;margin-top:6px}
.dz-saved{min-height:1.4em;margin:6px 0}
.dz-h{font-size:1.25rem;margin:0 0 8px}
.dz-ed-wrap{max-width:300px;margin:0 auto}
.dz-ed-wrap canvas{width:100%;height:auto;aspect-ratio:600/900;display:block;border:2px solid var(--ink);border-radius:12px;background:#fff6fa;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dz-hint{text-align:center;margin:6px 0 10px;font-size:.9rem;color:var(--muted)}
.dz-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.dz-tab{flex:none}
.dz-tabpanel{border-top:2px dashed var(--accent);padding-top:6px;outline:none}
.dz-tabpanel h3{font-size:1.05rem;margin:14px 0 8px}
.dz-sw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dz-swatch{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;padding:0}
.dz-swatch.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent-ink)}
.dz-custom{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.85rem;min-height:44px}
.dz-custom input{width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:50%;background:none;cursor:pointer}
.dz-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.dz-ic{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--ink);background:#fff;border-radius:14px;padding:6px 4px;min-height:44px;cursor:pointer;font:800 .75rem var(--font-body);color:var(--ink)}
.dz-ic.on{background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-ink)}
.dz-ic canvas{width:42px;height:54px}
.dz-chk{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.dz-chk input{width:24px;height:24px;accent-color:var(--accent)}
.dz-range{display:flex;align-items:center;gap:10px;font-weight:800;min-height:44px}
.dz-range input{flex:1;min-height:44px}
.dz-allnote{background:var(--accent-soft);border-radius:10px;padding:6px 10px;font-size:.9rem}
.dz-copy{background:var(--accent-soft);border-radius:12px;padding:10px 12px}
.dz-presets{margin-top:26px}
.dz-presets h3{margin:14px 0 8px}
.dz-presetgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.dz-preset{border:var(--line);background:#fff;border-radius:16px;padding:8px;cursor:pointer;font:800 .85rem var(--font-body);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px}
.dz-preset canvas{width:100%;height:auto;aspect-ratio:200/220;border-radius:10px;background:#fff6fa}
.dz-send{margin-top:30px;max-width:720px;margin-left:auto;margin-right:auto;background:#fff;border:var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--pop)}
.dz-est{background:var(--accent-soft);border-radius:12px;padding:10px 14px;margin:12px 0;min-height:3em}
@media(max-width:480px){.dz-stage,.dz-panel{padding:10px;box-shadow:3px 3px 0 var(--ink)}.dz-btn{padding:6px 11px;font-size:.85rem}}

/* hand view + Brook's real photo beside the preview */
.dz-viewrow{display:flex;gap:10px;align-items:flex-start;justify-content:center}
.dz-viewrow .dz-hand-wrap{flex:1 1 0;min-width:0;max-width:420px;margin:0}
.dz-hand-wrap canvas{background:radial-gradient(ellipse at 50% 35%,#fffafc 0,#fff1f6 70%,#ffe9f1 100%)}
.dz-real{margin:0;flex:0 0 36%;max-width:190px;position:relative;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:6px;box-shadow:3px 3px 0 var(--ink)}
.dz-real[hidden]{display:none}
.dz-real img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:9px;background:#f4e9ee}
.dz-real-tag{display:block;background:var(--ink);color:#fff;border-radius:999px;font:800 .66rem var(--font-body);padding:3px 9px;letter-spacing:.04em;text-transform:uppercase;text-align:center;margin:0 0 6px}
.dz-real figcaption{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:.78rem;line-height:1.25}
.dz-real figcaption .small{font-size:.68rem}
@media(min-width:900px){.dz-grid{grid-template-columns:minmax(340px,560px) 1fr}.dz-real{flex-basis:40%;max-width:230px}}
.dz-genh{margin:30px 0 4px;font-size:1.3rem}
.dz-pair{display:flex;gap:6px;width:100%}
.dz-pair img,.dz-pair canvas{flex:1 1 0;min-width:0;width:50%;height:auto;aspect-ratio:200/220;object-fit:cover;border-radius:10px;background:#fff1f6}
.dz-realgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.dz-preset-real{align-items:stretch;text-align:center}
@media(max-width:480px){.dz-realgrid{grid-template-columns:repeat(2,1fr)}.dz-real{flex-basis:38%}}
@media(min-width:1100px){.dz-grid{grid-template-columns:minmax(420px,620px) 1fr}}
.dz-badge{pointer-events:none}
@media(max-width:559px){
  .dz-viewrow{flex-direction:column;align-items:stretch;gap:10px}
  .dz-viewrow .dz-hand-wrap{max-width:none;width:100%}
  .dz-real{flex:none;max-width:none;width:100%;display:grid;grid-template-columns:104px 1fr;grid-template-areas:"tag tag" "img cap";gap:6px 12px;align-items:center}
  .dz-real .dz-real-tag{grid-area:tag;justify-self:start}
  .dz-real a{grid-area:img}
  .dz-real figcaption{grid-area:cap;margin:0;font-size:.85rem}
}