:host { display: grid; place-items: center; color: #173d32; }
    :host([fullscreen]) { position: fixed; inset: 0; z-index: 10000; background: var(--wendy-background, #f4f7f6); }
    :host([hidden]) { display: none !important; }
    * { box-sizing: border-box; }
    .content { display: grid; place-items: center; gap: 30px; padding: 32px; }
    .mark { width: var(--wendy-size, 220px); max-width: 64vw; }
    svg { display: block; width: 100%; height: auto; }
    .empty { fill: var(--wendy-empty, #d5e1dc); }
    .fill-level { transform: translateY(-42px); }
    .label { font: 400 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    :host(:not([show-label])) .label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

mask { mask-type: luminance; }