.tutorial-page{background:var(--surface)}.tutorial-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 32px;border-bottom:1px solid var(--border);min-height:56px;gap:16px}.tutorial-toolbar>a{font-weight:700}.locale-menu{position:relative;font-size:13px}.locale-menu summary{cursor:pointer;padding:10px}.locale-menu nav{position:absolute;inset-inline-end:0;top:100%;z-index:45;width:220px;max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 8px 24px #0002}.locale-menu a{display:block;padding:10px;min-height:44px}.locale-menu [aria-current]{color:var(--accent);background:var(--soft)}.tutorial-container{max-width:1280px;padding:40px 32px;margin:auto}.tutorial-page h1{font-size:clamp(24px,3vw,32px);line-height:1.3;margin:16px 0;overflow-wrap:anywhere}.tutorial-page h2{font-size:20px;line-height:1.4;margin:0 0 24px}.tutorial-page h3{font-size:14px;line-height:1.45;margin:0}.tutorial-intro{max-width:780px;margin-bottom:40px}.tutorial-intro p,.tutorial-description{color:var(--muted);font-size:14px;line-height:1.7}.tutorial-meta{font-size:12px;color:var(--muted)}.tutorial-section{margin:0 0 56px}.tutorial-section h2 small{color:var(--muted);font-size:14px;font-weight:400}.tutorial-grid,.example-grid,.scenario-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.example-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.scenario-grid li{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--soft)}.scenario-grid p{font-size:14px;color:var(--muted);margin:8px 0 0}.tutorial-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);min-width:0}.tutorial-card:hover{box-shadow:0 6px 16px #0001}.tutorial-cover,.example-media{display:block;aspect-ratio:16/10;background:var(--soft);overflow:hidden}.example-media{aspect-ratio:4/3}.tutorial-cover img,.example-media img,.example-media video{display:block;width:100%;height:100%;object-fit:cover}.card-body{display:flex;flex-direction:column;padding:16px;flex:1;min-width:0}.card-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-body p{color:var(--muted);font-size:14px;margin:8px 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;font-size:12px;color:var(--muted)}.card-foot a{color:var(--accent);font-size:14px;min-height:44px;display:inline-flex;align-items:center}.chips,.card-actions,.related-tags{display:flex;flex-wrap:wrap;gap:8px}.chips{margin-top:8px}.chips span{font-size:12px;padding:2px 8px;background:var(--soft);border-radius:6px}.card-actions{margin-top:auto;padding-top:16px}.create-button,.outline-button,.related-tags a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid var(--border);border-radius:12px;font-size:13px;background:var(--surface);color:var(--fg)}.create-button{background:#4f46e5;color:#fff;border-color:#4f46e5}.create-button:hover{color:#fff;background:#4338ca}.faq-item{border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:12px}.faq-item p{color:var(--muted);font-size:14px;margin-bottom:0}.gallery-grid{columns:4;column-gap:8px}.gallery-grid a{display:block;margin-bottom:8px;break-inside:avoid;border-radius:12px;overflow:hidden;background:var(--soft)}.gallery-grid img{width:100%;height:auto;display:block}.gallery-controls{text-align:center;padding:24px}.gallery-controls p{color:var(--muted);font-size:13px}@media(max-width:1279px){.tutorial-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1023px){.tutorial-toolbar{padding:8px 16px;padding-inline-start:110px}.gallery-grid{columns:3}}@media(max-width:639px){.tutorial-container{padding:28px 16px}.tutorial-grid,.example-grid,.scenario-grid{grid-template-columns:1fr}.gallery-grid{columns:2;column-gap:4px}.tutorial-toolbar>a{display:none}.tutorial-toolbar{justify-content:flex-end}}@media(min-width:1024px){[dir=rtl] .site-content{margin-left:0;margin-right:220px}[dir=rtl] .site-sidebar{left:auto;right:0;border-right:0;border-left:1px solid var(--border)}}@media(max-width:1023px){[dir=rtl].js-navigation .site-sidebar{inset:0 0 0 auto}}