.tutorial-page-container{height:100%;overflow-y:auto;padding:2rem 1.5rem;background:linear-gradient(180deg,#ffffff,#f8f9fa)}@media(min-width:768px){.tutorial-page-container{padding:3rem 4rem}}@media(min-width:1200px){.tutorial-page-container{padding:4rem 6rem}}.tutorial-article{max-width:920px;margin:0 auto}.tutorial-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid rgba(var(--border-color-rgb,223,226,230),.5)}.tutorial-category-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.08),rgba(var(--secondary-color-rgb),.08));border-radius:20px;border:1px solid rgba(var(--primary-color-rgb),.15);font-size:.875rem;font-weight:600;color:var(--primary-color);margin-bottom:1.5rem;box-shadow:inset 0 1px 2px hsla(0,0%,100%,.8),0 2px 4px rgba(0,0,0,.04)}.tutorial-category-name{line-height:1}.tutorial-cover-image{width:100%;max-height:480px;border-radius:16px;overflow:hidden;margin-bottom:2rem;box-shadow:0 8px 24px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04),inset 0 0 0 1px hsla(0,0%,100%,.6)}.tutorial-cover-image img{width:100%;height:100%;object-fit:cover;display:block}@media(min-width:768px){.tutorial-cover-image{max-height:560px}}.tutorial-title{font-size:2rem;font-weight:700;line-height:1.2;color:var(--text-color);margin-bottom:1rem;letter-spacing:-.02em}@media(min-width:768px){.tutorial-title{font-size:2.75rem}}.tutorial-excerpt{font-size:1.125rem;line-height:1.6;color:var(--medium-gray);font-style:italic;border-left:4px solid var(--primary-color);background:rgba(var(--primary-color-rgb),.03);padding:1rem 1.5rem;border-radius:0 12px 12px 0}.tutorial-content{font-size:1.0625rem;line-height:1.75;color:var(--text-color)}.tutorial-content h1,.tutorial-content h2,.tutorial-content h3,.tutorial-content h4,.tutorial-content h5,.tutorial-content h6{margin-top:2.5rem;margin-bottom:1.25rem;font-weight:700;color:var(--text-color);line-height:1.3;letter-spacing:-.01em}.tutorial-content h2{font-size:1.875rem;padding-bottom:.5rem;border-bottom:2px solid rgba(var(--border-color-rgb),.3)}.tutorial-content h3{font-size:1.5rem}.tutorial-content h4{font-size:1.25rem}.tutorial-content p{margin-bottom:1.5rem}.tutorial-content img{max-width:100%;height:auto;border-radius:12px;margin:2rem 0;box-shadow:0 4px 12px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04)}.tutorial-content .video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:2rem 0;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08)}.tutorial-content .video-wrapper embed,.tutorial-content .video-wrapper iframe,.tutorial-content .video-wrapper object,.tutorial-content .video-wrapper video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.tutorial-content iframe{max-width:100%;margin:2rem 0;border-radius:12px}.tutorial-content ol,.tutorial-content ul{padding-left:1.75rem;margin-bottom:1.5rem}.tutorial-content ol li,.tutorial-content ul li{margin-bottom:.75rem;line-height:1.7}.tutorial-content ol li::marker,.tutorial-content ul li::marker{color:var(--primary-color)}.tutorial-content blockquote{border-left:4px solid var(--primary-color);padding:1.25rem 1.5rem;margin:2rem 0;background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.04),rgba(var(--secondary-color-rgb),.04));border-radius:0 12px 12px 0;font-style:italic;box-shadow:inset 0 1px 2px hsla(0,0%,100%,.6)}.tutorial-content blockquote p:last-child{margin-bottom:0}.tutorial-content code{font-family:SF Mono,Monaco,Menlo,monospace;font-size:.9em;padding:.2em .4em;background:rgba(var(--primary-color-rgb),.08);border-radius:6px;border:1px solid rgba(var(--primary-color-rgb),.12)}.tutorial-content pre{padding:1.25rem;background:#1e1e1e;border-radius:12px;overflow-x:auto;margin:2rem 0;box-shadow:0 4px 12px rgba(0,0,0,.12),inset 0 1px 3px rgba(0,0,0,.3)}.tutorial-content pre code{background:none;border:none;padding:0;color:#d4d4d4}.tutorial-content a{color:var(--primary-color);text-decoration:none;border-bottom:1px solid rgba(var(--primary-color-rgb),.3);transition:color .2s ease,border-bottom-color .2s ease}.tutorial-content a:hover{color:var(--secondary-color);border-bottom-color:var(--secondary-color)}.tutorial-content table{width:100%;border-collapse:collapse;margin:2rem 0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06)}.tutorial-content table th{background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.08),rgba(var(--secondary-color-rgb),.08));padding:.75rem 1rem;text-align:left;font-weight:600;border-bottom:2px solid rgba(var(--primary-color-rgb),.2)}.tutorial-content table td{padding:.75rem 1rem;border-bottom:1px solid rgba(var(--border-color-rgb),.3)}.tutorial-content table tr:last-child td{border-bottom:none}.tutorial-content table tr:hover{background:rgba(var(--primary-color-rgb),.02)}.tutorial-embed-wrapper{position:relative;width:min(100%,920px);margin:2rem auto;aspect-ratio:16/9;min-height:clamp(220px,36vw,520px);border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12)}.tutorial-embed-wrapper iframe,.tutorial-embed-wrapper video{width:100%;max-width:100%;height:100%;display:block;border:0;margin:0;border-radius:12px}.tutorial-embed-wrapper video{background:rgba(var(--primary-color-rgb),.06)}.tutorial-embed-wrapper:hover .tutorial-embed-dock-button{opacity:1;transform:translateY(0)}.tutorial-embed-wrapper:focus-within .tutorial-embed-dock-button{opacity:1;transform:translateY(0)}.tutorial-embed-wrapper.is-docked-source{display:none}@media(max-width:767px){.tutorial-embed-wrapper{min-height:200px}}.tutorial-embed-dock-button{position:absolute;top:.7rem;right:.7rem;border:none;border-radius:999px;padding:.32rem .72rem;cursor:pointer;font-size:.74rem;font-weight:700;color:#fff;background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.95),rgba(var(--secondary-color-rgb),.95));box-shadow:0 4px 12px rgba(0,0,0,.22),inset 0 1px 2px hsla(0,0%,100%,.3);opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease}.tutorial-embed-dock-button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;opacity:1;transform:translateY(0)}.tutorial-floating-dock{position:fixed;right:1rem;bottom:1rem;width:min(360px,100vw - 2rem);z-index:1100;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#ffffff,#f5f8f9);box-shadow:0 14px 28px rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.12)}@media(min-width:1024px){.tutorial-floating-dock{right:1.5rem;bottom:1.5rem}}.tutorial-floating-dock-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .7rem;border-bottom:1px solid rgba(var(--border-color-rgb),.45);background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.08),rgba(var(--secondary-color-rgb),.06))}.tutorial-floating-dock-title{font-size:.76rem;font-weight:700;color:var(--text-color);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tutorial-floating-dock-actions{display:inline-flex;align-items:center;gap:.35rem}.tutorial-floating-dock-actions button{border:none;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-color);background:rgba(var(--primary-color-rgb),.12);transition:background-color .2s ease,transform .2s ease}.tutorial-floating-dock-actions button:hover{background:rgba(var(--primary-color-rgb),.2);transform:translateY(-1px)}.tutorial-floating-dock-actions button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.tutorial-floating-dock-body{aspect-ratio:16/9;background:rgba(var(--primary-color-rgb),.05)}.tutorial-floating-dock-body iframe,.tutorial-floating-dock-body video{width:100%;height:100%;border:0;display:block}@media(prefers-reduced-motion:reduce){.tutorial-content a,.tutorial-embed-dock-button,.tutorial-floating-dock-actions button{transition:none!important}}