.tutorial-book{font-size:1rem;line-height:1.55}.tutorial-book .tutorial-step{scroll-margin-top:calc(var(--nav-height, 3.5rem) + 1rem)}.tutorial-book .tutorial-piece{display:none}.tutorial-shot{margin:0 0 1rem}.tutorial-shot img{display:block;width:100%;height:auto;border:1px solid var(--border, var(--line));border-radius:10px}.tutorial-book .tutorial-shot.upright img{width:min(100%,15rem);margin:0 auto}.tutorial-lead{margin:0 0 .9rem;color:var(--muted)}.tutorial-points{display:grid;gap:.5rem;margin:0;padding-left:1.2rem}.tutorial-points kbd{padding:0 .35rem;border:1px solid var(--line-strong, var(--line));border-radius:5px;background:var(--subtle, transparent);font:inherit;font-size:.85em}.tutorial-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}.tutorial-links a{padding:.35rem .8rem;border:1px solid var(--terracotta, var(--accent));border-radius:999px;color:var(--terracotta, var(--accent));font-size:.88rem;text-decoration:none}.tutorial-links a:hover,.tutorial-links a:focus-visible{background:var(--terracotta, var(--accent));color:#fff}.tutorial-popup{box-sizing:border-box;flex-direction:column;max-width:none;max-height:none;padding:0;overflow:hidden;border:1px solid var(--border-strong, var(--line));border-radius:18px;background:var(--tile, var(--surface));box-shadow:var(--shadow-popup, var(--shadow));color:var(--text, var(--light));font-size:.97rem;line-height:1.5}.tutorial-popup[open]{display:flex}html.tutorial-open{overflow:hidden}.tutorial-popup::backdrop{background:#00000080}.tp-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--line)}.tp-head b{font-size:.92rem}.tp-close{width:2.2rem;height:2.2rem;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer}.tp-close:hover{background:var(--subtle, transparent);color:inherit}.tp-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.tp-body .tutorial-step{display:block;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}.tp-body .tutorial-step[hidden]{display:none!important}.tp-body .tutorial-shot{margin:0;background:var(--subtle, transparent)}.tp-body .tutorial-shot img{width:100%;height:100%;border:0;border-radius:0;object-fit:cover;object-position:top}.tp-body .tutorial-shot.upright img{object-fit:contain;object-position:center}.tp-body .tutorial-text{position:relative;padding:1.1rem 1.4rem 1.2rem}.tp-body .tutorial-heading{margin:0 2.6rem .4rem 0;font-size:1.3rem;outline:none}.tp-body .tutorial-piece{position:absolute;top:1rem;right:1.3rem;color:var(--terracotta, var(--accent));font-size:1.9rem;line-height:1}.tp-foot{flex:none;padding:.6rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}.tp-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-bottom:.55rem}.tp-dots button{width:.62rem;height:.62rem;padding:0;border:1px solid var(--line-strong, var(--line));border-radius:50%;background:transparent;cursor:pointer}.tp-dots button.done{border-color:var(--terracotta, var(--accent));background:color-mix(in srgb,var(--terracotta, var(--accent)) 35%,transparent)}.tp-dots button[aria-current]{border-color:var(--terracotta, var(--accent));background:var(--terracotta, var(--accent))}.tp-nav{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.tp-nav button{min-width:6.5rem;min-height:2.6rem;padding:.4rem 1rem;border:1px solid var(--line-strong, var(--line));border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}.tp-nav button:disabled{opacity:.4;cursor:default}.tp-nav .tp-next{border-color:var(--terracotta, var(--accent));background:var(--terracotta, var(--accent));color:#fff}.tp-count{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}.tutorial-popup{width:min(74rem,calc(100vw - 2rem));height:min(40rem,calc(100dvh - 2rem));margin:auto}.tp-body{overflow:hidden}.tp-body .tutorial-step{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);height:100%}.tp-body .tutorial-shot{height:100%;min-height:0;border-right:1px solid var(--line)}.tp-body .tutorial-shot img{object-fit:contain;object-position:center}.tp-body .tutorial-text{grid-column:2;overflow-y:auto}.tp-body .tutorial-step:not(:has(.tutorial-shot)){grid-template-columns:minmax(0,1fr)}.tp-body .tutorial-step:not(:has(.tutorial-shot)) .tutorial-text{grid-column:1}@media (max-width: 640px){.tutorial-popup{width:100vw;height:100dvh;border:0;border-radius:0}.tp-body{overflow-y:auto}.tp-body .tutorial-step{display:block;height:auto}.tp-body .tutorial-shot{height:30dvh;border:0}.tp-body .tutorial-text{overflow:visible}.tp-dots button{width:.55rem;height:.55rem}.tp-nav button{flex:1 1 0;min-width:0}}.tutorial-invite{position:fixed;right:1rem;bottom:1rem;z-index:40;box-sizing:border-box;width:min(21rem,calc(100vw - 2rem));padding:.85rem 1rem;border:1px solid var(--terracotta);border-radius:14px;background:var(--popup-full, var(--surface));box-shadow:var(--shadow-popup, var(--shadow));color:var(--text, var(--light));font-size:.88rem;line-height:1.4;animation:tutorial-invite-in .3s ease-out;transition:opacity .25s,transform .25s}.tutorial-invite.leaving{opacity:0;transform:translateY(6px)}.tutorial-invite p{margin:0}.tutorial-invite-later{margin-top:.3rem!important;color:var(--muted);font-size:.8rem}.tutorial-invite-buttons{display:flex;align-items:center;gap:.5rem;margin-top:.7rem!important}.tutorial-invite-buttons a,.tutorial-invite-buttons button{padding:.4rem .8rem;border:1px solid var(--terracotta);border-radius:10px;font:inherit;font-size:.85rem;text-decoration:none;cursor:pointer}.tutorial-invite-buttons a{background:var(--terracotta);color:#fff}.tutorial-invite-buttons button{border-color:var(--line);background:transparent;color:inherit}body.has-thumbs .tutorial-invite{bottom:calc(4.8rem + env(safe-area-inset-bottom,0px))}@keyframes tutorial-invite-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.tutorial-invite{animation:none;transition:none}}