.tutorial-page { width:100%; max-width:1120px; min-width:0; margin:0 auto; color:var(--tt-text); }
body.tapdown-tutorial-document:not(.nav-locked):not(:has(dialog[open])) { overflow-x:clip; }
.tapdown-tutorial-document .tapdown-main { padding-top:0; }
.tutorial-heading { position:sticky; top:var(--tt-topbar-h); z-index:795; display:flex; align-items:center; gap:12px; box-sizing:border-box; height:var(--tt-mobile-sticky-h,56px); min-height:var(--tt-mobile-sticky-h,56px); margin-bottom:16px; padding:6px 0; border-bottom:1px solid var(--tt-border); background:var(--tt-bg); }
.tutorial-heading h1,.tutorial-heading__label { margin:0; font-size:var(--tt-mobile-sticky-font,16px); font-weight:700; }
.tutorial-index { max-width:1120px; margin:24px auto 0; }
.tutorial-layout { display:grid; grid-template-columns:minmax(0,800px) 280px; justify-content:center; gap:40px; margin:28px auto 0; }
.tutorial-reading { min-width:0; }
.tutorial-author { display:flex; gap:10px; align-items:center; }
.tutorial-author .avatar { display:block; flex:none; width:32px; height:32px; border-radius:50%; }
.tutorial-author strong { color:var(--tt-primary); font-size:13px; }
.tutorial-sidebar { display:grid; align-self:start; align-content:start; gap:18px; min-width:0; }
.tutorial-sidebar__panel { padding:18px; border:1px solid var(--tt-border); border-radius:16px; background:var(--tt-bg-card); }
.tutorial-sidebar__panel h2 { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:16px; }
.tutorial-sidebar__panel h2 svg { width:20px; height:20px; color:var(--tt-primary); }
.tutorial-sidebar__categories a { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; color:var(--tt-text-2); font-size:14px; }
.tutorial-sidebar__categories svg { flex:none; width:20px; height:20px; color:var(--tt-text-3); }
.tutorial-sidebar__articles { display:grid; gap:18px; }
.tutorial-sidebar__articles a { display:flex; align-items:center; gap:10px; min-width:0; color:var(--tt-text); }
.tutorial-sidebar__articles img { width:64px; height:48px; flex:none; border-radius:8px; object-fit:cover; }
.tutorial-sidebar__articles span { min-width:0; }
.tutorial-sidebar__articles strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:13px; line-height:1.6; }
.tutorial-sidebar__articles small { display:block; margin-top:5px; color:var(--tt-text-3); font-size:11px; }
.tutorial-sidebar a:hover { color:var(--tt-primary); }
.tutorial-categories { display:flex; gap:8px; padding:0 0 20px; overflow-x:auto; scrollbar-width:none; }
.tutorial-categories::-webkit-scrollbar { display:none; }
.tutorial-categories a { flex:none; padding:10px 16px; border:1px solid var(--tt-border); border-radius:12px; color:var(--tt-text-2); white-space:nowrap; }
.tutorial-categories a[aria-current="page"] { border-color:var(--tt-text); background:var(--tt-text); color:var(--tt-bg); }
.tutorial-page a:focus-visible { outline:2px solid var(--tt-primary); outline-offset:3px; }
.tutorial-category-intro { margin-bottom:16px; padding:18px 20px; border-radius:14px; background:color-mix(in srgb,var(--tt-primary) 5%,var(--tt-bg)); }
.tutorial-category-intro h2 { margin:0 0 6px; font-size:18px; }
.tutorial-category-intro > div { color:var(--tt-text-2); line-height:1.7; overflow-wrap:anywhere; }
.tutorial-list { display:grid; gap:14px; }
.tutorial-card { display:flex; gap:24px; align-items:center; padding:24px; border:1px solid var(--tt-border); border-radius:16px; background:var(--tt-bg-card); transition:border-color .16s,box-shadow .16s; }
.tutorial-card:hover { border-color:color-mix(in srgb,var(--tt-primary) 35%,var(--tt-border)); box-shadow:var(--tt-shadow); }
.tutorial-card__body { flex:1; min-width:0; }
.tutorial-card h2 { margin:0 0 10px; font-size:19px; line-height:1.5; overflow-wrap:anywhere; }
.tutorial-card h2 a { color:var(--tt-text); }
.tutorial-card h2 a:hover { color:var(--tt-primary); }
.tutorial-card__excerpt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 12px; color:var(--tt-text-2); font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.tutorial-meta { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--tt-text-3); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.tutorial-meta a { color:var(--tt-text-2); }
.tutorial-card .tutorial-meta a { display:inline-block; padding:2px 8px; border-radius:5px; background:color-mix(in srgb,var(--tt-text) 4%,var(--tt-bg)); }
.tutorial-card__image { flex:0 0 150px; width:150px; }
.tutorial-card__image img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:12px; }
.tutorial-empty { padding:24px 0; color:var(--tt-text-2); }
.tutorial-article { padding:0; }
.tutorial-article__header h1 { margin:0 0 16px; font-size:30px; line-height:1.5; overflow-wrap:anywhere; }
.tutorial-article__header { padding-bottom:24px; border-bottom:1px solid var(--tt-border); }
.tutorial-content { padding:24px 0; font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.tutorial-content p { margin:0 0 1.2em; }
.tutorial-content :is(h2,h3,h4) { margin:1.5em 0 .7em; line-height:1.5; scroll-margin-top:calc(var(--tt-topbar-h) + var(--tt-mobile-sticky-h,56px) + 16px); }
.tutorial-content h2 { padding-left:12px; border-left:3px solid var(--tt-primary); font-size:22px; }
.tutorial-content h3 { font-size:18px; }
.tutorial-content :is(ul,ol) { padding-left:1.6em; margin:1em 0; }
.tutorial-content ul { list-style:disc; }
.tutorial-content ol { list-style:decimal; }
.tutorial-content :is(img,video,iframe,figure,.wp-caption) { max-width:100%; }
.tutorial-content :is(img,video) { height:auto; }
.tutorial-content iframe { width:100%; height:auto; aspect-ratio:16/9; }
.tutorial-content :is(figure,.alignwide,.alignfull) { margin-left:0; margin-right:0; }
.tutorial-content :is(pre,table,.wp-block-table) { display:block; max-width:100%; overflow-x:auto; }
.tutorial-content pre { padding:16px; background:var(--tt-bg-card); border:1px solid var(--tt-border); border-radius:10px; }
.tutorial-content table { border-collapse:collapse; }
.tutorial-content :is(th,td) { padding:10px; border:1px solid var(--tt-border); }
.tutorial-content blockquote { margin:18px 0; padding:8px 18px; border-left:3px solid var(--tt-primary); color:var(--tt-text-2); }
.tutorial-content a,.tutorial-article__footer a,.tutorial-comments a { color:var(--tt-primary); }
.tutorial-article__footer { padding:20px 0; border-top:1px solid var(--tt-border); }
.tutorial-page :is(.nav-links,.tutorial-pages) { display:flex; flex-wrap:wrap; gap:8px; padding:24px 0; }
.tutorial-page .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:6px 12px; border:1px solid var(--tt-border); border-radius:10px; }
.tutorial-page .page-numbers.current { color:var(--tt-primary); border-color:var(--tt-primary); }
.tutorial-comments { margin-top:28px; padding-top:24px; border-top:1px solid var(--tt-border); background:var(--tt-bg); scroll-margin-top:calc(var(--tt-topbar-h) + var(--tt-mobile-sticky-h,56px) + 16px); }
.tutorial-comments .tapdown-comments__title { margin:0; font-size:18px; }
.tutorial-comments .comment-respond { margin:0 0 24px; }
.tutorial-comments .comment-reply-title { display:block; margin:0 0 12px; font-size:14px; color:var(--tt-text-2); }
.tutorial-comments .comment-reply-title small { margin-left:10px; font-size:13px; }
.tutorial-comment-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 12px; padding:14px; border-radius:12px; background:color-mix(in srgb,var(--tt-text) 4%,var(--tt-bg)); }
.tutorial-comment-form > :not(.tutorial-comment-tools):not(.form-submit):not(input[type=hidden]) { grid-column:1 / -1; margin:0; }
.tutorial-comments__editor { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.tutorial-comments__avatar { flex:none; line-height:0; }
.tutorial-comments__avatar img { display:block; width:36px; height:36px; border-radius:50%; }
.tutorial-comments__input { flex:1; min-width:0; padding:8px 10px; border-radius:10px; background:var(--tt-bg); }
.tutorial-comments :is(input:not([type=checkbox]):not([type=submit]):not([type=hidden]):not([type=file]),textarea),.tutorial-content input[type=password] { box-sizing:border-box; width:100%; max-width:100%; padding:12px; border:1px solid var(--tt-border); border-radius:10px; background:var(--tt-bg); color:var(--tt-text); }
.tutorial-comments .tutorial-comments__input #comment { display:block; width:100%; min-height:38px; max-height:240px; padding:0; border:0; border-radius:0; background:transparent; resize:none; overflow-y:auto; font:inherit; font-size:14px; line-height:1.7; }
.tutorial-comments label { display:inline-block; margin:0 0 6px; }
.tutorial-comments .screen-reader-text { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.tutorial-comments .tutorial-comment-form .form-submit { grid-column:2; margin:0; }
.tutorial-comment-form .tapdown-submit-btn { min-height:44px; }
.tutorial-comments .comment-form-cookies-consent { display:flex; gap:8px; align-items:center; }
.tutorial-comments .comment-form-cookies-consent label { margin:0; }
.tutorial-comments .comment-notes { font-size:13px; color:var(--tt-text-2); }
.tutorial-content input[type=submit] { padding:10px 20px; border:0; border-radius:12px; background:var(--tt-primary); color:#fff; cursor:pointer; }
.tutorial-comment-tools { position:relative; display:flex; align-items:center; gap:4px; grid-column:1; min-width:0; padding-left:44px; }
.tutorial-comments .tapdown-cbar { border-color:var(--tt-border); background:var(--tt-bg); color:var(--tt-text-2); touch-action:manipulation; }
.tutorial-comments .tapdown-cbar:disabled { opacity:.5; cursor:default; }
.tutorial-comment-emojis { position:absolute; left:44px; bottom:calc(100% + 8px); z-index:30; display:grid; grid-template-columns:repeat(8,32px); gap:4px; max-width:calc(100vw - 48px); box-sizing:border-box; padding:8px; border:1px solid var(--tt-border); border-radius:10px; background:var(--tt-bg); box-shadow:var(--tt-shadow); }
.tutorial-comment-emojis[hidden] { display:none; }
.tutorial-comment-emojis button { display:grid; place-items:center; width:32px; height:32px; padding:4px; border:0; border-radius:6px; background:none; cursor:pointer; touch-action:manipulation; }
.tutorial-comment-emojis img { display:block; width:24px; height:24px; }
.tutorial-comments .tapdown-cmt__name { color:var(--tt-text); }
.tutorial-comments .children { margin-left:0; padding-left:34px; }
.tutorial-comments .tapdown-cmt__time { color:var(--tt-text-3); }
.tutorial-comments .tapdown-cmt__author.is-reply { background:color-mix(in srgb,var(--tt-text) 5%,var(--tt-bg)); color:var(--tt-text-2); }
.tutorial-comments .tapdown-cmt__acts :is(button,a) { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:32px; min-height:32px; box-sizing:border-box; padding:4px 8px; border:0; border-radius:6px; background:none; color:var(--tt-text-3); font-size:13px; text-decoration:none; touch-action:manipulation; }
.tutorial-comments .tapdown-cmt__like.is-on { color:var(--tt-primary); }
.tutorial-comments :is(button,a,input,textarea):focus-visible { outline:2px solid var(--tt-primary); outline-offset:3px; }
.tutorial-comments__notice,.tutorial-comments__status { margin:8px 0 0; color:var(--tt-text-2); font-size:13px; }
.tutorial-comments__status:empty { display:none; }
.tutorial-comments .comment-respond { scroll-margin-top:calc(var(--tt-topbar-h) + var(--tt-mobile-sticky-h,56px) + 16px); }
@media (hover:hover) and (pointer:fine) {
	.tutorial-comments .tapdown-cmt__acts :is(button,a):hover,.tutorial-comment-emojis button:hover { background:color-mix(in srgb,var(--tt-text) 5%,var(--tt-bg)); color:var(--tt-primary); }
	.tutorial-comments .tapdown-cbar:hover { border-color:var(--tt-primary); color:var(--tt-primary); }
}
@media (max-width:1100px) {
	.tutorial-layout { grid-template-columns:minmax(0,800px); }
	.tutorial-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
	body.tapdown-tutorial-document { --tt-topbar-h:calc(56px + env(safe-area-inset-top)); }
	.tapdown-tutorial-document .tapdown-topbar__inner { grid-template-rows:56px; height:56px; min-height:56px; padding-bottom:0; }
	.tapdown-tutorial-document .tapdown-topbar__center { display:none; }
	.tutorial-heading { margin:0 -12px 12px; padding:6px 12px; gap:8px; }
	.tutorial-index,.tutorial-layout { margin-top:16px; }
	.tutorial-layout { gap:24px; }
	.tutorial-sidebar { grid-template-columns:minmax(0,1fr); }
	.tutorial-card { gap:12px; padding:16px; border-radius:14px; }
	.tutorial-card h2 { font-size:17px; margin-bottom:8px; }
	.tutorial-card__image { flex-basis:96px; width:96px; }
	.tutorial-meta { gap:4px 10px; }
	.tutorial-article__header h1 { font-size:24px; }
	.tutorial-content { padding:20px 0; }
	.tutorial-content h2 { font-size:20px; }
	.tutorial-comments .tutorial-comments__input #comment,.tutorial-comments :is(input[type=text],input[type=email],input[type=url]) { font-size:16px; }
	.tutorial-comment-tools { padding-left:0; }
	.tutorial-comments .tapdown-cbar,.tutorial-comments .tapdown-cmt__acts :is(button,a) { min-width:44px; min-height:44px; }
	.tutorial-comment-emojis { left:0; grid-template-columns:repeat(5,44px); gap:0; }
	.tutorial-comment-emojis button { width:44px; height:44px; }
	.tutorial-comments .children { padding-left:24px; }
	.tutorial-comments .tapdown-comment-preview button { width:44px; height:44px; }
}