.kmg{--ln:color-mix(in oklab, var(--color-base-content) 55%, transparent);--mu:color-mix(in oklab, var(--color-base-content) 62%, transparent);--dot:color-mix(in oklab, var(--color-base-content) 10%, transparent);--ew:2.75rem;border:1px solid var(--color-base-300);border-radius:var(--radius-box);background:var(--color-base-100) radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0 / 14px 14px;margin:1.75rem 0;padding:.85rem 1rem .5rem;font-size:.875rem;line-height:1.4}.kmg__ctl{flex-wrap:wrap;align-items:center;gap:.5rem .9rem;min-height:2rem;display:flex}.kmg__ctl+.kmg__ctl{margin-top:.4rem}.kmg__lbl{min-width:6.5rem;font:.6875rem var(--font-mono);color:var(--mu)}.kmg__who{border:1px solid var(--color-base-300);background:var(--color-base-100);border-radius:999px;padding:2px;display:flex}.kmg__who label{cursor:pointer;position:relative}.kmg__who input{opacity:0;position:absolute}.kmg__who span{color:var(--mu);border-radius:999px;padding:.1rem .6rem;display:block}.kmg__who input:checked+span{background:var(--color-base-content);color:var(--color-base-100)}.kmg__who input:focus-visible+span,.kmg__send:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.kmg__tog{cursor:pointer;align-items:center;gap:.3rem;display:inline-flex}.kmg__tog input{accent-color:var(--color-primary);width:.95rem;height:.95rem}.kmg select{border:1px solid var(--color-base-300);border-radius:var(--radius-field);background:var(--color-base-100);color:inherit;font:.8125rem var(--font-mono);padding:.1rem .3rem}.kmg__send{border-radius:var(--radius-field);background:var(--color-base-content);color:var(--color-base-100);cursor:pointer;border:0;margin-inline-start:auto;padding:.3rem .9rem;font-weight:600}.kmg__send:hover{background:var(--color-primary);color:var(--color-primary-content)}.kmg__send:active{translate:0 1px}.kmg__meta{font:.6875rem/1.45 var(--font-mono);color:var(--mu);gap:.1rem;margin:.7rem 0 .2rem;display:grid}.kmg__meta b{color:var(--color-base-content);font-weight:600}.kmg .kmg__rec{color:inherit;font:inherit;overflow-wrap:break-word;background:0 0;padding:0}.kmg__rec mark{color:var(--color-primary);background:0 0;font-weight:600}.kmg[data-spf=false] .kmg__rec{opacity:.5;text-decoration:line-through}.kmg__track{height:6.4rem;position:relative;container-type:inline-size}.kmg__track:before{content:"";border-top:1.5px dashed var(--color-base-300);position:absolute;inset:2.3rem 0 auto}.kmg__gate{top:0;left:calc(var(--i) * (100% - var(--ew)) / 4 + var(--ew) / 2);text-align:center;justify-items:center;width:5.5rem;display:grid;position:absolute;translate:-50%}.kmg__gate b{font:600 .6875rem var(--font-mono);letter-spacing:.04em}.kmg__gate i{border:2px solid var(--ln);border-bottom:0;border-radius:.5rem .5rem 0 0;width:3.4rem;height:2.4rem;margin-top:.05rem;transition:border-color .2s}.kmg__gate span{font:700 .75rem var(--font-mono);text-transform:uppercase;color:var(--mu);margin-top:.15rem}.kmg__gate small{color:var(--mu);white-space:nowrap;font-size:.6875rem}.kmg__gate[data-v]{animation:.25s kmg-pop}.kmg__gate[data-v=pass] i{border-color:var(--color-success)}.kmg__gate[data-v=pass] span{color:var(--color-success)}.kmg__gate[data-v=fail] i{border-color:var(--color-error)}.kmg__gate[data-v=fail] span{color:var(--color-error)}.kmg__gate[data-v=none] i{border-style:dashed}.kmg__env{z-index:1;width:var(--ew);height:1.9rem;fill:var(--color-base-100);stroke:var(--color-base-content);stroke-width:1.6px;stroke-linejoin:round;translate:calc(var(--p,0) * (100cqw - var(--ew)) / 4) var(--y,0);transition:translate .3s cubic-bezier(.45,0,.25,1),opacity .3s,rotate .3s;position:absolute;top:1.45rem;left:0;overflow:visible}.kmg__seal{fill:oklch(55% .19 27);stroke:none}.kmg[data-who=spoof] .kmg__seal{fill:var(--color-base-200);stroke:var(--ln);stroke-dasharray:2 2}.kmg[data-dkim=false] .kmg__seal{display:none}.kmg__env[data-k]{opacity:0;transition:translate .45s cubic-bezier(.45,0,.25,1),scale .45s,opacity .2s .35s;scale:.6}.kmg__env[data-k=bounce]{rotate:-20deg}.kmg__bins{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.kmg__bins span{border:1px solid var(--color-base-300);border-radius:var(--radius-field);text-align:center;color:var(--mu);background:var(--color-base-100);padding:.3rem;font-weight:600}.kmg__bins [data-hit]{--c:var(--color-success);border:1.5px solid var(--c);color:var(--color-base-content);background:color-mix(in oklab, var(--c) 14%, var(--color-base-100));animation:.3s kmg-pop}.kmg__bins [data-bin=spam][data-hit]{--c:var(--color-warning)}.kmg__bins [data-bin=bounce][data-hit]{--c:var(--color-error)}@keyframes kmg-pop{50%{scale:1.06}}.kmg .kmg__out{border-inline-start:3px solid var(--color-base-300);min-height:3.1em;margin:.6rem 0 0;padding-inline-start:.6rem;font-size:.875rem}.kmg__out[data-bin=inbox]{border-color:var(--color-success)}.kmg__out[data-bin=spam]{border-color:var(--color-warning)}.kmg__out[data-bin=bounce]{border-color:var(--color-error)}.kmg figcaption{margin-top:.4rem}@media (width<=30rem){.kmg{--ew:2.3rem;padding-inline:.7rem}.kmg__lbl{min-width:100%;margin-bottom:-.3rem}.kmg__gate{width:4.6rem}.kmg__gate i{width:2.9rem}.kmg__gate small{font-size:.625rem}.kmg .kmg__out{min-height:4.5em}}@media (prefers-reduced-motion:reduce){.kmg *,.kmg :before,.kmg :after{transition:none!important;animation:none!important}}.kmg__gate small{unicode-bidi:plaintext}
