/* tutorials */
.gd { padding-top: 26px; padding-bottom: 34px; }
.gdHero { text-align: center; margin-bottom: 20px; }
.gdHero h1 { margin: 0; font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.gdHero p { margin: 6px auto 0; color: var(--muted); max-width: 640px; }
.gdGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gdCard { position: relative; display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.gdCard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.gdIcon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--c); margin-bottom: 6px; }
.gdIcon svg { width: 24px; height: 24px; }
.gdIcon.big { width: 64px; height: 64px; border-radius: 18px; flex: none; }
.gdIcon.big svg { width: 32px; height: 32px; }
.gdTag { position: absolute; top: 18px; left: 18px; font-size: .74rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border-radius: 99px; padding: .15rem .6rem; }
.gdCard b { font-size: 1.08rem; }
.gdDesc { color: var(--muted); font-size: .92rem; line-height: 1.75; }
.gdNote { text-align: center; color: var(--muted); margin-top: 18px; }

.article { max-width: 820px; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--primary); text-decoration: none; font-weight: 600; }
.crumbs span { margin: 0 .3em; }
.gdHead { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.gdHead h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.gdHead p { margin: 4px 0 0; color: var(--muted); }
.article h2 { font-size: 1.25rem; margin: 28px 0 10px; }
.gdList { margin: 0; padding-inline-start: 1.2em; }
.gdList li { margin: 6px 0; }
.gdSteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gdSteps li { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.gdSteps .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--primary); }
.gdSteps b { display: block; font-size: 1.02rem; }
.gdSteps p { margin: 4px 0 0; color: var(--muted); }
.gdBox { border-radius: 16px; padding: 14px 16px; margin: 18px 0; }
.gdBox b { display: block; margin-bottom: 2px; }
.gdBox p { margin: 0; }
.gdBox.ok { background: var(--primary-soft); }
.gdBox.ok b { color: var(--primary); }
.gdBox.warn { background: var(--gold-soft); }
.gdBox.warn b { color: #8a5a0f; }
.gdQ { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 8px 0; }
.gdQ summary { cursor: pointer; font-weight: 700; }
.gdQ p { margin: 8px 0 0; color: var(--muted); }
.gdSrc { color: var(--muted); font-size: .82rem; margin-top: 22px; }
@media (max-width: 900px) { .gdGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gdGrid { grid-template-columns: 1fr; } .gdHead { align-items: flex-start; } }

/* step pictures: small screens drawn for the guide (our own drawings, not screenshots): the thing to press is ringed
   and a hand points at it */
.shot { margin: 12px 0 2px; max-width: 420px; border: 1px solid #d9e2df; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(20, 50, 45, .1); direction: rtl; font-size: .86rem; }
.shotBar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #eef2f1; border-bottom: 1px solid #dde5e2; }
.shotBar i { width: 9px; height: 9px; border-radius: 50%; background: #c9d3d0; }
.shotBar span { margin-inline-start: 8px; flex: 1; background: #fff; border-radius: 99px; padding: .1rem .7rem; font-size: .76rem; color: #5d6e6a; text-align: left; }
.shotBar b { margin-inline-start: 6px; font-size: .78rem; color: #3e4b48; }
.shotBody { padding: 16px; display: grid; gap: 10px; justify-items: start; }
.shotBody h4 { margin: 0; font-size: 1.05rem; }
.shotBody p { margin: 0; color: #5d6e6a; font-size: .82rem; }
.sBtn { position: relative; display: inline-block; border-radius: 9px; padding: .45rem 1rem; font-weight: 700; font-size: .85rem; background: #f1f4f3; color: #1d2b29; border: 1px solid #dde5e2; }
.sBtn.main { background: #2f6fd6; border-color: transparent; color: #fff; }
.shot .hl { position: relative; box-shadow: 0 0 0 4px rgba(244, 180, 61, .55); animation: ringPulse 1.8s ease-in-out infinite; }
.shot .hl::after { content: ""; position: absolute; width: 26px; height: 26px; inset-inline-end: -14px; bottom: -20px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11l.1-1.6a1.5 1.5 0 0 1 3 .2V12l.2-.9a1.4 1.4 0 0 1 2.7.6v3.8c0 3-2.2 5.5-5.2 5.5h-1c-1.6 0-3-.8-3.9-2.1l-2.6-3.8a1.4 1.4 0 0 1 2.1-1.8L9 14z' fill='%23fff' stroke='%231d2b29' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@keyframes ringPulse { 50% { box-shadow: 0 0 0 7px rgba(244, 180, 61, .25); } }
.sField { width: 100%; border: 1px solid #c9d3d0; border-radius: 8px; padding: .45rem .7rem; color: #1d2b29; background: #fff; font-size: .82rem; text-align: left; }
.sMenu { display: grid; min-width: 210px; border: 1px solid #dde5e2; border-radius: 10px; box-shadow: 0 8px 20px rgba(20, 50, 45, .12); margin-top: -4px; }
.sMenu i { font-style: normal; padding: .45rem .8rem; }
.sMenu i.hl { background: #fff4dd; font-weight: 700; border-radius: 8px; }
.sDone { width: 100%; border-top: 1px dashed #d9e2df; padding-top: 10px; display: grid; gap: 8px; justify-items: start; }
.sProg { width: 100%; height: 8px; border-radius: 99px; background: #e6ecea; overflow: hidden; }
.sProg i { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, #2f6fd6, #5aa0ff); border-radius: inherit; }
.sOk { display: flex; align-items: center; gap: 8px; color: #0f6e56; font-weight: 700; }
.sOk::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; background: #0f6e56; color: #fff; display: grid; place-items: center; font-size: .78rem; }
.sApp { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #2b579a; color: #fff; }
.sApp b { font-size: 1.1rem; }
.sApp small { opacity: .85; }
.sCap { margin: 6px 0 0; font-size: .78rem; color: #7b8a86; }
@media (prefers-reduced-motion: reduce) { .shot .hl { animation: none; } }