.tutorials-page{max-width:860px;margin:0 auto;padding:2rem 1.5rem 4rem}.public-tutorials-layout{background-color:var(--surface-canvas,#f9fafb);flex-direction:column;min-height:100vh;display:flex}.public-tutorials-layout main{flex:1}.public-tutorials-topbar{border-bottom:1px solid var(--border-subtle,#e5e7eb);background-color:var(--surface-raised,#fff);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.public-tutorials-brand{color:var(--text-primary,#111827);align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.public-tutorials-brand:hover{text-decoration:underline}.tutorials-hero{text-align:center;flex-direction:column;align-items:center;margin-bottom:2.5rem;display:flex}.tutorials-hero-badge{text-transform:uppercase;letter-spacing:.04em;color:var(--brand-dark,#065f46);background-color:var(--brand-subtle,#ecfdf5);border:1px solid var(--brand-border,#a7f3d0);border-radius:9999px;align-items:center;gap:.375rem;margin-bottom:1rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.tutorials-hero h1{color:var(--text-primary,#111827);margin:0 0 .75rem;font-size:2.25rem;font-weight:800;line-height:1.2}.tutorials-hero-sub{color:var(--text-muted,#4b5563);max-width:640px;margin:0 0 1.75rem;font-size:1.125rem;line-height:1.5}.tutorials-search-bar{width:100%;max-width:540px;margin-bottom:1.25rem;position:relative}.tutorials-search-icon{color:var(--text-muted,#9ca3af);pointer-events:none;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.tutorials-search-bar input{border:1px solid var(--border-subtle,#d1d5db);background-color:var(--surface-raised,#fff);width:100%;color:var(--text-primary,#111827);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);border-radius:9999px;padding:.75rem 2.5rem .75rem 2.75rem;font-size:.9375rem}.tutorials-clear-search{color:var(--text-muted,#6b7280);cursor:pointer;background:0 0;border:none;padding:.25rem;font-size:.8125rem;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.tutorials-categories{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.tutorials-category-pill{border:1px solid var(--border-subtle,#e5e7eb);background-color:var(--surface-raised,#fff);color:var(--text-secondary,#4b5563);cursor:pointer;border-radius:9999px;padding:.4rem .875rem;font-size:.8125rem;font-weight:500;transition:all .15s}.tutorials-category-pill:hover{background-color:var(--surface-muted,#f3f4f6)}.tutorials-category-pill.active{background-color:var(--brand-primary,#0f766e);color:#fff;border-color:var(--brand-primary,#0f766e)}.tutorials-list{flex-direction:column;gap:2rem;display:flex}.tutorial-card{background-color:var(--surface-raised,#fff);border:1px solid var(--border-subtle,#e5e7eb);border-radius:var(--radius-lg,12px);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);padding:1.75rem}.tutorial-card-header{align-items:flex-start;gap:1.25rem;margin-bottom:1.5rem;display:flex}.tutorial-icon-box{border-radius:var(--radius-md,8px);background-color:var(--brand-subtle,#ecfdf5);width:44px;height:44px;color:var(--brand-dark,#065f46);flex-shrink:0;justify-content:center;align-items:center;display:flex}.tutorial-category-tag{text-transform:uppercase;letter-spacing:.04em;color:var(--brand-primary,#0f766e);margin-bottom:.25rem;font-size:.75rem;font-weight:600;display:inline-block}.tutorial-card-header h2{color:var(--text-primary,#111827);margin:0 0 .5rem;font-size:1.375rem;font-weight:700;line-height:1.3}.tutorial-summary{color:var(--text-muted,#4b5563);margin:0;font-size:.9375rem;line-height:1.5}.tutorial-steps{flex-direction:column;gap:1.25rem;padding-left:.5rem;display:flex}.tutorial-step-item{gap:1rem;display:flex}.tutorial-step-indicator{flex-direction:column;align-items:center;display:flex}.tutorial-step-number{background-color:var(--brand-subtle,#ecfdf5);border:1px solid var(--brand-border,#a7f3d0);width:26px;height:26px;color:var(--brand-dark,#065f46);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.8125rem;font-weight:700;display:flex}.tutorial-step-body{flex:1}.tutorial-step-body h3{color:var(--text-primary,#111827);margin:0 0 .25rem;font-size:1rem;font-weight:600}.tutorial-step-body p{color:var(--text-muted,#4b5563);margin:0;font-size:.875rem;line-height:1.5}.tutorial-tip{background-color:var(--surface-muted,#f3f4f6);border-left:3px solid var(--brand-primary,#0f766e);border-radius:0 var(--radius-sm,4px) var(--radius-sm,4px) 0;color:var(--text-secondary,#374151);margin-top:.5rem;padding:.5rem .75rem;font-size:.8125rem;line-height:1.4}.tutorial-card-footer{border-top:1px solid var(--border-subtle,#e5e7eb);justify-content:flex-end;margin-top:1.5rem;padding-top:1rem;display:flex}.tutorial-card-footer .button{align-items:center;gap:.5rem;display:inline-flex}.tutorials-empty{text-align:center;background-color:var(--surface-raised,#fff);border:1px solid var(--border-subtle,#e5e7eb);border-radius:var(--radius-lg,12px);color:var(--text-muted,#6b7280);flex-direction:column;align-items:center;gap:.75rem;padding:3rem 1.5rem;display:flex}.tutorials-help-banner{background-color:var(--surface-raised,#fff);border:1px solid var(--border-subtle,#e5e7eb);border-radius:var(--radius-lg,12px);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem;margin-top:3rem;padding:1.5rem 2rem;display:flex}.tutorials-help-banner h2{color:var(--text-primary,#111827);margin:0 0 .25rem;font-size:1.25rem;font-weight:700}.tutorials-help-banner p{color:var(--text-muted,#4b5563);margin:0;font-size:.875rem}.tutorials-help-actions{flex-wrap:wrap;gap:.75rem;display:flex}