.smjk{--bg:#f5efe2;--card:#fffdf8;--ink:#2b2620;--muted:#6f6350;--acc:#845806;--bd:#d3c6ab;
  --ok:#1f6b36;--warn:#8a3a10;max-width:52rem;margin:0 auto;padding:0 1rem 3rem}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .smjk{--bg:#17140f;
  --card:#211d16;--ink:#ece4d5;--muted:#a99a82;--acc:#e6c766;--bd:#4a4030;--ok:#8fd3a5;
  --warn:#f0b48a}}
:root[data-theme=dark] .smjk{--bg:#17140f;--card:#211d16;--ink:#ece4d5;--muted:#a99a82;
  --acc:#e6c766;--bd:#4a4030;--ok:#8fd3a5;--warn:#f0b48a}
/* [hidden] is a user-agent rule and ANY author `display` beats it. The install button,
   the "installed" note, the NFC button, the progress row and the two warnings all start
   hidden and all sit under rules that set display, so every one of them was on screen
   while element.hidden was still true. Found on 2026-09-11 by screenshotting a panel and
   seeing a button the DOM insisted was hidden. */
.smjk [hidden]{display:none!important}
.smjk section{background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:1.1rem 1.1rem 1.3rem;margin:1.1rem 0;color:var(--ink)}
.smjk h2{font-size:1.15rem;margin:0 0 .5rem;color:var(--ink)}
.smjk p{margin:.4rem 0;color:var(--ink)}
.smjk .sub{color:var(--muted);font-size:.92rem}
.smjk button,.smjk .btn{font:inherit;background:var(--acc);color:var(--card);border:1px solid var(--acc);
  border-radius:9px;padding:.62rem 1.05rem;cursor:pointer;text-decoration:none;display:inline-block}
.smjk button:hover,.smjk .btn:hover{filter:brightness(1.12)}
.smjk button:focus-visible,.smjk .btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.smjk button.ghost{background:transparent;color:var(--acc);border-color:var(--bd)}
.smjk button.ghost:hover{border-color:var(--acc)}
.smjk .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.6rem 0}
.smjk label{color:var(--ink)}
.smjk select,.smjk input[type=text],.smjk input[type=password]{font:inherit;background:var(--bg);
  color:var(--ink);border:1px solid var(--bd);border-radius:8px;padding:.5rem .6rem}
.smjk select:focus-visible,.smjk input:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
.smjk .bar{height:10px;border-radius:6px;background:var(--bg);border:1px solid var(--bd);overflow:hidden}
.smjk .bar i{display:block;height:100%;width:0;background:var(--acc)}
.smjk .tiers{list-style:none;margin:.5rem 0;padding:0}
.smjk .tiers li{display:flex;gap:.55rem;align-items:flex-start;margin:.35rem 0}
.smjk .icons{display:flex;flex-wrap:wrap;gap:.8rem;margin:.6rem 0}
.smjk .smjk-icon{background:transparent;border:2px solid var(--bd);border-radius:14px;padding:.4rem;
  width:7.2rem;text-align:center;color:var(--ink);line-height:1.25}
.smjk .smjk-icon img{width:5.6rem;height:5.6rem;display:block;margin:0 auto .35rem;border-radius:12px}
.smjk .smjk-icon.smjk-on{border-color:var(--acc)}
.smjk .smjk-icon small{display:block;color:var(--muted);font-size:.78rem}
.smjk .qr{background:#fff;padding:.5rem;border-radius:10px;display:inline-block;border:1px solid var(--bd)}
.smjk .qr img{display:block;width:11rem;height:11rem;image-rendering:pixelated}
.smjk code{background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:.15rem .35rem;
  font-size:.86rem;word-break:break-all;color:var(--ink)}
.smjk .ok{color:var(--ok)}
.smjk .warn{color:var(--warn)}
.smjk .r4{border-left:3px solid var(--acc);padding-left:.8rem;color:var(--muted);font-size:.94rem}
/* ROUND G, 2026-09-12 - the inline Safari-share pictogram (a UI glyph, not artwork; see
   src/viralkit.py's _KIT_SHARE_GLYPH_SVG). currentColor so it themes with the sentence
   beside it; sized to the text and never larger than the line it sits in. The shape is
   left-right symmetric on purpose (an up arrow), so RTL never has to mirror it. */
.smjk-glyph{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex:none}
/* The round-six diagnostics block (?diag=1 only). Muted on the card's own ground, both
   themes, and it wraps rather than pushing the page sideways on a phone. */
.smjk #smjk-diag{font:.78rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--muted);background:var(--bg);border:1px solid var(--bd);border-radius:8px;
  padding:.55rem .6rem;margin:.6rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
#smjk-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2b2620;
  color:#f3ecdd;padding:.6rem 1rem;border-radius:9px;z-index:99999;font-size:.92rem}
#smjk-toast[hidden]{display:none}
@media print{.smjk{max-width:none}}