.hvv-gmw{--green:#00510c;--red:#a00000;box-sizing:border-box;background:linear-gradient(165deg,#f8f9f4 35%,#dbedda);border-radius:18px;padding:32px clamp(16px,3vw,40px);max-width:1120px;margin:32px auto;color:#30352e}.hvv-gmw *{box-sizing:border-box}.hvv-gmw-heading{text-align:center;max-width:680px;margin:0 auto 35px}.hvv-gmw-heading h2{font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.2;margin:0}.hvv-gmw-heading i{display:block;width:48px;height:3px;background:#f17713;margin:15px auto}.hvv-gmw-heading p{color:#657063;line-height:1.7}.hvv-gmw-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,60px);align-items:center}.hvv-gmw-preview{text-align:center;min-width:0}.hvv-gmw-preview canvas{display:block;width:100%;height:auto;max-width:440px;border-radius:12px;margin:auto;box-shadow:0 12px 24px #0002;touch-action:none;cursor:grab}.hvv-gmw-preview p,.hvv-gmw-step p{color:#677064;font-size:14px;line-height:1.5}.hvv-gmw-step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:21px 0;border-bottom:1px solid #d9e0d5}.hvv-gmw-step:last-child{border:0}.hvv-gmw-step>b{border-radius:50%;height:35px;width:35px;background:var(--green);display:grid;place-items:center;color:white}.hvv-gmw-step h3{font-size:18px;font-weight:750;margin:3px 0 11px}.hvv-gmw-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:2px solid var(--green);padding:10px 20px;border-radius:8px;cursor:pointer;font-size:15px;font-weight:750;text-align:center}.hvv-gmw-btn.red{background:var(--red);border-color:var(--red);color:white}.hvv-gmw-btn.outline{background:transparent;color:var(--green)}.hvv-gmw-formats,.hvv-gmw-actions{display:flex;gap:10px;flex-wrap:wrap}.hvv-gmw-formats button{border:2px solid var(--green);border-radius:30px;padding:10px 14px;font-weight:750;color:var(--green);background:white;cursor:pointer}.hvv-gmw-formats button[aria-pressed=true]{color:white;background:var(--green)}.hvv-gmw-step label:not(.hvv-gmw-btn){display:grid;gap:10px;font-weight:600}.hvv-gmw-zoom{width:100%;accent-color:var(--green)}.hvv-gmw-panel{margin-top:14px;background:white;border-radius:13px;padding:15px;box-shadow:0 4px 18px #0001}.hvv-gmw-panel[hidden]{display:none}.hvv-gmw-social{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.hvv-gmw-social button{border:0;border-radius:9px;padding:12px 8px;color:white;background:#1877f2;font-weight:750;cursor:pointer}.hvv-gmw-social [data-social=instagram]{background:linear-gradient(110deg,#ff995c,#db297e,#5c4bdb)}.hvv-gmw-social [data-social=x]{background:#111}.hvv-gmw-social [data-social=whatsapp]{background:#17c866}.hvv-gmw-social [data-social=native]{grid-column:1/-1;background:var(--green)}.hvv-gmw-copy{background:white;color:var(--green);border:1px solid var(--green);padding:8px 12px;border-radius:6px;cursor:pointer}.hvv-gmw button:focus-visible,.hvv-gmw input:focus-visible{outline:3px solid orange;outline-offset:3px}@media(max-width:720px){.hvv-gmw-layout{grid-template-columns:1fr}.hvv-gmw-preview canvas{max-width:350px}.hvv-gmw-heading{margin-bottom:18px}}

/* v1.0.2: square preview, top alignment, spacing and simplified sharing */
.hvv-gmw-layout{align-items:start}
.hvv-gmw-preview canvas{border-radius:0}
.hvv-gmw-preview>p{margin-top:24px}
.hvv-gmw-controls>.hvv-gmw-step:first-child{padding-top:0}
.hvv-gmw-social{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:17px}
.hvv-gmw-social button{min-width:0;overflow-wrap:anywhere}
.hvv-gmw-step .hvv-gmw-status{margin-top:22px;font-weight:650;color:var(--green)}
.hvv-gmw-step .hvv-gmw-hashtag{margin-top:22px}
.hvv-gmw-step .hvv-gmw-share-help{margin-top:15px}
.hvv-gmw-credit{text-align:center;margin:36px 0 0;padding-top:19px;border-top:1px solid #cbdcca;color:#54634f;font-size:14px}
.hvv-gmw-credit a{color:var(--green);font-weight:700;text-decoration:underline}
@media(max-width:480px){.hvv-gmw-social{grid-template-columns:1fr 1fr}.hvv-gmw-social button:last-child{grid-column:1/-1}}

/* v1.0.3: accessible social icon buttons, always a single neat row */
.hvv-gmw-social{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hvv-gmw-social button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:58px;padding:11px;border-radius:9px}
.hvv-gmw-social button svg{display:block;width:28px;height:28px;flex:none}
.hvv-gmw-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:480px){.hvv-gmw-social{grid-template-columns:repeat(3,minmax(0,1fr))}.hvv-gmw-social button:last-child{grid-column:auto}}

/* v1.0.4: keep a compact live preview visible during mobile editing. */
@media(max-width:720px){
  .hvv-gmw-layout{display:block}
  .hvv-gmw-preview{
    position:sticky;
    top:8px;
    z-index:20;
    background:#f7f9f4;
    padding:10px 8px 8px;
    margin:0 -8px 16px;
    border:1px solid #e0e8dd;
    box-shadow:0 7px 19px rgba(0,40,0,.12);
  }
  .hvv-gmw-preview canvas{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:34vh;
    max-height:34dvh;
    margin:0 auto;
    object-fit:contain;
    box-shadow:0 3px 10px rgba(0,0,0,.16);
  }
  .hvv-gmw-preview>p{margin:8px 0 0;font-size:12px}
  .hvv-gmw-controls>.hvv-gmw-step:first-child{padding-top:14px}
}