.tutorial-detail{flex:1;padding:3rem 1rem 5rem;position:relative;overflow:hidden}@media (max-width:700px){.tutorial-detail{padding:4rem 1rem 3rem}}.tutorial-detail-container{z-index:1;flex-direction:column;gap:2.4rem;max-width:900px;margin:0 auto;display:flex;position:relative}.tutorial-detail-back{color:#8f8f8f;align-items:center;gap:.5rem;width:fit-content;font-size:.9rem;text-decoration:none;transition:color .15s;display:inline-flex}.tutorial-detail-back:hover{color:#fff}.tutorial-detail-top{color:#fff;flex-direction:column;gap:1rem;display:flex}.tutorial-detail-accent-bar{border-radius:999px;width:56px;height:5px}.tutorial-detail-title{letter-spacing:-.01em;margin:0;font-size:2.4rem;font-weight:500;line-height:1.15}@media (max-width:550px){.tutorial-detail-title{font-size:1.9rem}}.tutorial-detail-intro{color:#b4b4b4;text-align:center;max-width:700px;margin:0;font-size:.98rem;line-height:1.6}.tutorial-detail-top-hero{text-align:center;flex-direction:column;align-items:center;gap:2.2rem;padding:1rem 0 .5rem}.tutorial-detail-hero-text{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}.tutorial-detail-title-hero{font-size:2.5rem}.tutorial-detail-intro-hero{color:#bebebe;text-align:center;max-width:640px;font-size:.98rem;line-height:1.6}.tutorial-detail-hero-visual{flex-shrink:0;width:460px;max-width:100%}.tdh-panel{background:#ffffff08;border:1px solid #ffffff14;border-radius:16px;gap:.8rem;padding:1rem;display:flex;position:relative;box-shadow:0 20px 50px #0006}.tdh-sidebar{flex-direction:column;flex-shrink:0;gap:.55rem;width:85px;padding-top:.3rem;display:flex}.tdh-dot{border-radius:6px;width:20px;height:20px;margin-bottom:.4rem}.tdh-line{background:#ffffff24;border-radius:5px;height:8px}.tdh-line.w70{width:70%}.tdh-line.w60{width:60%}.tdh-line.w50{width:50%}.tdh-line.w45{width:80%}.tdh-line.w40{width:40%}.tdh-main{flex-direction:column;flex:1;gap:.7rem;min-width:0;display:flex}.tdh-chips{gap:.4rem;display:flex}.tdh-chip{border-radius:6px;width:48px;height:22px}.tdh-chip-outline{border:1px solid #ffffff24;border-radius:6px;width:48px;height:22px}.tdh-grid{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.tdh-cell{aspect-ratio:1;background:#ffffff0f;border-radius:4px}.tdh-cell.is-filled{background:#fff3}.tdh-cursor{align-items:flex-start;display:flex;position:absolute;bottom:-12px;right:14px}.tdh-cursor-tag{color:#0a0a0a;white-space:nowrap;border-radius:4px;margin-top:10px;margin-left:2px;padding:2px 6px;font-size:.62rem;font-weight:700}.tutorial-detail-steps{background-color:#3636364d;border:1px solid #ffffff14;border-radius:18px;flex-direction:column;gap:1.5rem;padding:2rem;display:flex}@media (max-width:600px){.tutorial-detail-steps{padding:1.5rem 1.2rem}}.tutorial-detail-steps-label{text-transform:uppercase;letter-spacing:.07em;color:#969696;margin:0;font-size:.75rem;font-weight:600}.tutorial-detail-list{flex-direction:column;gap:1.4rem;margin:0;padding:0;list-style:none;display:flex}.tutorial-detail-step{align-items:flex-start;gap:1rem;display:flex}.tutorial-detail-step-number{color:#fff;background:#ffffff12;border:1px solid #ffffff1f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.85rem;font-weight:600;display:flex}.tutorial-detail-step-text{color:#d7d7d7;margin:0;font-size:.92rem;line-height:1.6}.tutorial-detail-notfound{color:#fff;flex-direction:column;gap:.6rem;padding:2.5rem 0;display:flex}.tutorial-detail-notfound-title{margin:0;font-size:1.5rem;font-weight:500}.tutorial-detail-notfound-des{color:#969696;margin:0;font-size:.9rem}.tutorial-detail .stars{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.tutorial-detail .star{background-color:#fff;border-radius:50%;position:absolute;box-shadow:0 0 2px #fff3}