.mk{display:grid;gap:22px;margin-top:22px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  @media (max-width:820px){.mk{grid-template-columns:1fr}}
  /* The UA rule behind the hidden attribute is [hidden]{display:none}, which
     loses to any author display rule at the same specificity — .mk-actions and
     .mk-row would both keep showing while marked hidden. Restore it for the
     container and everything inside it. */
  .mk[hidden],.mk [hidden]{display:none}
  .mk.is-busy{opacity:.6;pointer-events:none}

  .mk-stage{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--panel)}
  .mk-canvas-wrap{border-radius:10px;overflow:hidden;
    background-color:var(--check-a);
    background-image:
      linear-gradient(45deg,var(--check-b) 25%,transparent 25%),
      linear-gradient(-45deg,var(--check-b) 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,var(--check-b) 75%),
      linear-gradient(-45deg,transparent 75%,var(--check-b) 75%);
    background-size:18px 18px;
    background-position:0 0,0 9px,9px -9px,-9px 0}
  .mk-canvas-wrap canvas{display:block;width:100%;height:auto}

  .mk-truesize{display:flex;align-items:flex-end;gap:18px;margin-top:16px;flex-wrap:wrap}
  .mk-truesize figure{margin:0;text-align:center}
  .mk-truesize canvas{display:block;image-rendering:auto}
  .mk-truesize figcaption{font-size:.74rem;color:var(--ink-dim);margin-top:6px;font-family:var(--mono)}

  .mk-panel{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--panel)}
  .mk-panel h3{margin:0 0 4px;font-size:.95rem}
  .mk-group{padding:12px 0;border-bottom:1px solid var(--line)}
  .mk-group:last-of-type{border-bottom:0}
  .mk-row{display:flex;align-items:center;gap:10px;margin-top:8px}
  .mk-row label{flex:0 0 92px;font-size:.85rem;color:var(--ink-dim)}
  .mk-row input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--chroma)}
  .mk-row input[type=color]{width:40px;height:32px;padding:0;border:1px solid var(--line);
    border-radius:8px;background:transparent;cursor:pointer}
  .mk-row output{flex:0 0 46px;text-align:right;font-family:var(--mono);font-size:.78rem;color:var(--ink-dim)}
  .mk-check{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}
  .mk-check input{accent-color:var(--chroma);width:16px;height:16px}

  .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .seg button{background:transparent;color:var(--ink-dim);border:0;padding:7px 14px;
    font:inherit;font-size:.83rem;cursor:pointer}
  .seg button[aria-pressed=true]{background:var(--chroma);color:#06210f;font-weight:700}

  .mk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .mk-outputs{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .mk-out{display:flex;align-items:center;gap:12px;font-size:.85rem;
    border:1px solid var(--line);border-radius:10px;padding:8px 12px}
  .mk-out-dim{font-family:var(--mono);flex:0 0 76px}
  .mk-out-kb{flex:1 1 auto;color:var(--ink-dim);font-size:.78rem}
  .mk-out-kb.over{color:var(--warn)}
  .mk-out a{font-weight:700;color:var(--chroma);text-decoration:none}
  .mk-out a:hover{text-decoration:underline}
  .mk-note{margin-top:10px;font-size:.8rem;color:var(--ink-dim);min-height:1.2em}

  .cite-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;
    border:1px solid rgba(128,128,128,.35);border-radius:8px;padding:14px 16px}
  .cite-box code{flex:1 1 300px;min-width:0;overflow-wrap:anywhere;white-space:normal;font-size:.92rem;line-height:1.5}
  .cite-box button{min-height:40px;border:1px solid currentColor;border-radius:8px;
    background:transparent;color:inherit;padding:8px 16px;cursor:pointer;font-weight:700}