.tutorial{padding:6rem 1rem 5rem;overflow:hidden}@media (max-width:700px){.tutorial{padding:4rem 1rem 3rem}}.tutorial-container{flex-direction:column;justify-content:center;align-items:center;gap:3rem;display:flex}@media (max-width:900px){.tutorial-container{gap:2rem}}.turotial-top{color:#fff;flex-direction:column;align-items:center;width:100%;max-width:1200px;display:flex}.tutorial-title{text-align:center;font-size:4rem;font-weight:400}@media (max-width:850px){.tutorial-title{font-size:3.5rem}}@media (max-width:550px){.tutorial-title{font-size:3rem}}@media (max-width:450px){.tutorial-title{font-size:2.5rem}}.tutorial-des{color:#8f8f8f;text-align:center;font-size:.9rem}.tutorial-middle{grid-template-columns:repeat(3,1fr);gap:1.5rem;width:100%;max-width:1200px;display:grid}@media (max-width:1100px){.tutorial-middle{grid-template-columns:repeat(2,1fr)}}@media (max-width:700px){.tutorial-middle{grid-template-columns:repeat(1,1fr)}}.tutorial-card{cursor:pointer;background:#ffffff05;border:1px solid #ffffff21;border-radius:16px;flex-direction:column;text-decoration:none;transition:all .2s ease-in-out;display:flex;overflow:hidden}.tutorial-card:hover{border-color:#ffffff24;transform:translateY(-3px)}.tutorial-banner{justify-content:center;align-items:center;width:100%;height:150px;display:flex;position:relative;overflow:hidden}.tutorial-banner-purple{background:linear-gradient(135deg,#5b21b6,#9333ea)}.tutorial-banner-blue{background:linear-gradient(135deg,#1d4ed8,#3b82f6)}.tutorial-banner-teal{background:linear-gradient(135deg,#0f766e,#14b8a6)}.tutorial-mock{background:#0f0f12d9;border:1px solid #ffffff1a;border-radius:12px;padding:.8rem 1rem;box-shadow:0 14px 34px -10px #00000080}.tutorial-mock-profile{flex-wrap:wrap;align-items:center;gap:.5rem;width:200px;display:flex}.tutorial-mock-avatar{background:#a855f799;border-radius:50%;flex-shrink:0;width:26px;height:26px}.tutorial-mock-line{background:#ffffff2e;border-radius:4px;height:7px}.tutorial-mock-line.w60{width:60%}.tutorial-mock-line.w50{width:50%}.tutorial-mock-line.w45{width:45%}.tutorial-mock-line.w40{width:40%}.tutorial-mock-line.w35{width:35%}.tutorial-mock-line.light{opacity:.5}.tutorial-mock-profile .tutorial-mock-line.w60{width:calc(100% - 38px)}.tutorial-mock-profile .tutorial-mock-line.w40{width:100%;margin-left:38px}.tutorial-mock-cal{width:170px}.tutorial-mock-cal-labels,.tutorial-mock-cal-days{grid-template-columns:repeat(5,1fr);gap:.3rem;display:grid}.tutorial-mock-cal-labels span{text-align:center;color:#fff6;text-transform:uppercase;font-size:.55rem}.tutorial-mock-cal-days{margin-top:.4rem}.tutorial-mock-cal-days span{aspect-ratio:1;color:#ffffff8c;background:#ffffff0a;border-radius:4px;justify-content:center;align-items:center;font-size:.6rem;display:flex}.tutorial-mock-cal-days span.active{color:#fff;background:#3b82f6;font-weight:700}.tutorial-mock-list{flex-direction:column;gap:.5rem;width:190px;display:flex}.tutorial-mock-row{align-items:center;gap:.5rem;display:flex}.tutorial-mock-chip{background:#14b8a68c;border-radius:4px;flex-shrink:0;width:16px;height:16px}.tutorial-lower{flex-direction:column;flex:1;align-items:start;gap:.5rem;padding:1.1rem 1.2rem;display:flex}.tutorial-card-title{color:#ebebeb;margin:0;font-size:1.15rem;font-weight:600}.tutorial-card-des{color:#969696;margin:0;font-size:.82rem;line-height:1.4}.tutorial-card-tag{color:#828282;text-transform:uppercase;letter-spacing:.03em;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.72rem;font-weight:600;display:flex}.stars{pointer-events:none;position:absolute;inset:0;overflow:hidden}.star{background:#fff;border-radius:50%;animation:ease-in-out infinite alternate twinkle,linear infinite float;position:absolute;overflow:hidden;box-shadow:0 0 2px #fff3}@keyframes twinkle{0%{opacity:.15}to{opacity:.6}}@keyframes float{0%{transform:translateY(0)}to{transform:translateY(-80px)}}@keyframes floatDown{0%{transform:translateY(0)}to{transform:translateY(80px)}}.star:nth-child(2n){animation-duration:3s,6s}.star:nth-child(3n){animation-duration:5s,10s}.tutorial-banner-indigo{background:linear-gradient(135deg,#3730a3,#6366f1)}.tutorial-banner-pink{background:linear-gradient(135deg,#9d174d,#ec4899)}.tutorial-banner-slate{background:linear-gradient(135deg,#1e293b,#475569)}.tutorial-banner-orange{background:linear-gradient(135deg,#9a3412,#f97316)}.tutorial-banner-cyan{background:linear-gradient(135deg,#155e75,#22d3ee)}.tutorial-banner-gold{background:linear-gradient(135deg,#92400e,#eab308)}.tutorial-mock-intro{width:190px;padding:.8rem 1rem;position:relative}.tutorial-mock-intro-selection{background:#818cf81a;border:1.5px solid #818cf8;border-radius:6px;flex-direction:column;gap:.45rem;padding:.6rem .7rem;display:flex;position:relative}.tutorial-mock-cursor-intro{align-items:flex-start;display:flex;position:absolute;bottom:-10px;right:-4px}.tutorial-mock-cursor-tag-intro{color:#0a0a0a;white-space:nowrap;background:#818cf8;border-radius:4px;margin-top:10px;margin-left:2px;padding:.12rem .45rem;font-size:.6rem;font-weight:700}.tutorial-mock-editor{flex-direction:column;gap:.6rem;width:190px;display:flex}.tutorial-mock-editor-row{border-bottom:1px solid #ffffff14;align-items:center;gap:.4rem;padding-bottom:.5rem;display:flex}.tutorial-mock-line.w70{width:70%}.tutorial-mock-line.w30{width:30%}.tutorial-mock-editor-selected{background:#ec489914;border:1.5px solid #ec4899;border-radius:6px;flex-direction:column;gap:.4rem;padding:.5rem;display:flex;position:relative}.tutorial-mock-domain{align-items:center;gap:.5rem;width:190px;padding:.7rem .9rem;display:flex}.tutorial-mock-domain-dot{background:#4ade80;border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 6px #4ade80b3}.tutorial-mock-domain-text{color:#ffffffb3;font-family:monospace;font-size:.72rem}.tutorial-mock-mail{color:#ffffffbf;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:relative}.tutorial-mock-mail-badge{background:#f97316;border:2px solid #0f0f12d9;border-radius:50%;width:10px;height:10px;position:absolute;top:2px;right:2px}.tutorial-mock-members{align-items:center;gap:.5rem;padding:.7rem 1rem;display:flex}.tutorial-mock-avatars{display:flex}.tutorial-mock-member-avatar{background:#22d3ee;border:2px solid #0f0f12e6;border-radius:50%;width:28px;height:28px;margin-left:-8px}.tutorial-mock-avatars .tutorial-mock-member-avatar:first-child{margin-left:0}.tutorial-mock-member-more{color:#fff9;font-size:.7rem;font-weight:700}.tutorial-mock-plan{flex-direction:column;align-items:flex-start;gap:.45rem;width:150px;padding:.8rem 1rem;display:flex}.tutorial-mock-price{color:#fff;margin:0;font-size:1.4rem;font-weight:500}.tutorial-mock-price span{color:#ffffff80;margin-left:.2rem;font-size:.7rem;font-weight:500}