.tutorial-wrap{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;width:100%;max-width:1100px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 4px 24px #0000000a}.tutorial-counter{font-family:var(--font-ui);color:var(--color-text-muted);z-index:10;letter-spacing:.05em;font-size:.8125rem;position:absolute;top:24px;right:24px}.tutorial-slides{width:100%;min-height:480px;position:relative}.tutorial-slide{opacity:0;visibility:hidden;z-index:1;flex-direction:column;width:100%;transition:opacity .3s,visibility .3s;display:flex;position:absolute;top:0;left:0}.tutorial-slide[data-active=true]{opacity:1;visibility:visible;z-index:2;position:relative}.tutorial-img-container{aspect-ratio:16/9;background-color:#f8f5f0;width:100%;position:relative;overflow:hidden}.tutorial-img-container img{width:100%;height:100%;object-fit:contain!important}.tutorial-caption{text-align:center;padding:40px 64px 64px}.tutorial-caption p{font-family:var(--font-body);color:var(--color-text-secondary);max-width:42em;margin:0 auto;font-size:1.125rem;line-height:1.7}.tutorial-arrow{background:var(--color-surface);border:1px solid var(--color-border);width:44px;height:44px;color:var(--color-text-primary);cursor:pointer;z-index:20;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 8px #0000000d}.tutorial-arrow:hover{background-color:var(--color-background);border-color:var(--color-text-muted);transform:translateY(-50%)scale(1.05)}.tutorial-arrow:disabled{opacity:.3;cursor:not-allowed;transform:translateY(-50%)}.tutorial-arrow-prev{left:12px}.tutorial-arrow-next{right:12px}.tutorial-dots{z-index:20;gap:12px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.tutorial-dot{background-color:var(--color-border);cursor:pointer;border:none;border-radius:50%;width:6px;height:6px;padding:0;transition:all .2s}.tutorial-dot[data-active=true]{background-color:var(--color-accent);transform:scale(1.2)}@media (max-width:768px){.tutorial-caption{padding:32px 24px 56px}.tutorial-caption p{font-size:1rem}.tutorial-arrow{width:36px;height:36px;top:auto;bottom:24px;transform:none}.tutorial-arrow-prev{left:24px}.tutorial-arrow-next{right:24px}.tutorial-arrow:hover{transform:none}}
.tutorial-page-root{background-color:var(--color-background);min-height:100vh;padding-top:100px}.tutorial-container{max-width:1200px;margin:0 auto}.tutorial-hero{text-align:center;padding:80px 32px 48px}.tutorial-title{font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:24px;font-size:3.5rem;font-weight:300}.tutorial-subtitle{font-family:var(--font-body);color:var(--color-text-secondary);max-width:600px;margin:0 auto;font-size:1.25rem}.tutorial-content{padding:0 32px 120px}.tutorial-footer-cta{background-color:var(--color-surface);text-align:center;border-top:1px solid var(--color-border);padding:120px 32px}.tutorial-footer-cta h2{font-family:var(--font-display);margin-bottom:16px;font-size:2.5rem;font-weight:300}.tutorial-footer-cta p{font-family:var(--font-body);color:var(--color-text-secondary);margin-bottom:40px;font-size:1.125rem}.tutorial-cta{background-color:var(--color-accent);color:var(--color-background);font-family:var(--font-ui);border-radius:4px;padding:14px 40px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.tutorial-cta:hover{opacity:.9;transform:translateY(-1px)}@media (max-width:768px){.tutorial-title{font-size:2.75rem}.tutorial-subtitle{font-size:1.125rem}.tutorial-page-root{padding-top:80px}.tutorial-hero{padding:64px 24px 32px}.tutorial-content{padding:0 24px 80px}}