/* tutorial.css: the setup guide at /tutorial (2026-10-21). Screenshots of the
   extension popup sit next to their notes; on phones they stack. Uses the
   tokens from fz.css. */
.prose .shot{margin:30px 0 38px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;align-items:start}
.prose .shot img{display:block;width:100%;height:auto;border:3px solid var(--ink);background:var(--card);box-shadow:8px 8px 0 var(--cobalt)}
.prose .shot figcaption{font-size:17px;line-height:1.55;color:var(--grey);padding-top:6px}
.prose .shot figcaption b{color:var(--ink)}
.prose .shot.wide{grid-template-columns:minmax(0,1fr);gap:14px}
.prose .shot.wide img{box-shadow:8px 8px 0 var(--coral)}
.prose .steps-n{counter-reset:s;list-style:none;padding:0}
.prose .steps-n li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;margin:0 0 .9em}
.prose .steps-n li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;margin-top:2px;border:3px solid var(--ink);background:var(--cobalt);color:var(--card);font-family:var(--mono);font-size:14px;font-weight:600}
.prose .fields{margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:14px}
.prose .fields li{margin:0;padding:16px 18px;border:3px solid var(--ink);background:var(--card)}
.prose .fields li b{display:block;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-0.01em;margin-bottom:4px}
.prose .fields .eg{display:block;margin-top:8px;font-size:16px;color:var(--grey)}
.prose .limits{width:100%;border-collapse:collapse;margin:8px 0 1.6em;font-size:17px;border:3px solid var(--ink);background:var(--card)}
.prose .limits th,.prose .limits td{padding:11px 14px;text-align:left;border-bottom:2px solid var(--rule);vertical-align:top}
.prose .limits thead th{background:var(--ink);color:var(--card);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em;border-bottom:0}
.prose .limits td:first-child{font-weight:700}
.prose .warn{border:3px solid var(--ink);background:var(--yellow);padding:18px 22px;margin:0 0 1.4em;font-size:18px}
.prose .warn p{margin:0}
.prose .faq dt{font-weight:700;margin-top:1.1em}
.prose .faq dd{margin:.3em 0 0}
@media (max-width:760px){
  .prose .shot{grid-template-columns:minmax(0,1fr);gap:16px}
  .prose .shot img{max-width:320px}
  .prose .shot.wide img{max-width:100%}
  .prose .limits{font-size:15px}
  .prose .limits th,.prose .limits td{padding:9px 10px}
}