:root{--tut-card-bg: rgba(255, 255, 255, .76);--tut-card-border: var(--line);--tut-card-border-hover: var(--line-strong);--tut-card-shadow: 0 12px 28px var(--shadow);--tut-card-shadow-hover: 0 18px 40px var(--shadow-strong);--tut-step-no-bg: rgba(124, 78, 243, .1);--tut-tip-bg: rgba(124, 78, 243, .04);--tut-notes-bg: rgba(239, 122, 214, .04);--tut-notes-border: rgba(239, 122, 214, .2);--tut-radius: var(--card-radius)}@media(prefers-color-scheme:dark){:root{--tut-card-bg: rgba(255, 255, 255, .06);--tut-card-border: rgba(151, 120, 230, .18);--tut-card-border-hover: rgba(151, 120, 230, .36);--tut-card-shadow: 0 12px 28px rgba(0, 0, 0, .24);--tut-card-shadow-hover: 0 18px 40px rgba(0, 0, 0, .32);--tut-step-no-bg: rgba(124, 78, 243, .2);--tut-tip-bg: rgba(124, 78, 243, .08);--tut-notes-bg: rgba(239, 122, 214, .08);--tut-notes-border: rgba(239, 122, 214, .24)}}.tutorial-hero{position:relative;z-index:1;padding:calc(var(--nav-height) + 8px) 0 48px;text-align:center;background:radial-gradient(circle at 25% 30%,rgba(179,145,255,.18) 0%,transparent 45%),radial-gradient(circle at 75% 50%,rgba(239,122,214,.12) 0%,transparent 40%),linear-gradient(180deg,rgba(240,233,255,.35) 0%,transparent 100%)}@media(prefers-color-scheme:dark){.tutorial-hero{background:radial-gradient(circle at 25% 30%,rgba(124,78,243,.12) 0%,transparent 45%),radial-gradient(circle at 75% 50%,rgba(239,122,214,.08) 0%,transparent 40%),linear-gradient(180deg,rgba(124,78,243,.06) 0%,transparent 100%)}}.tutorial-hero-inner{width:var(--content-width);max-width:none;margin:0 auto;padding:0 var(--section-gutter)}.tutorial-tabs{display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}.tutorial-tab{padding:10px 22px;border:1px solid var(--line);border-radius:999px;background:var(--surface-strong);color:var(--text-soft);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease;text-decoration:none}.tutorial-tab:hover{border-color:var(--line-strong);color:var(--text);background:var(--surface)}.tutorial-tab.active{background:var(--button-gradient);color:#fff;border-color:transparent;box-shadow:var(--button-shadow)}.tutorial-tab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.tutorial-content{display:none;padding:clamp(40px,6vw,72px) 0}.tutorial-content.active{display:block}.tutorial-section-desc{max-width:640px;margin:0 auto 32px;text-align:center;color:var(--text-soft);font-size:clamp(15px,1.6vw,17px);line-height:1.7}.tutorial-steps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:24px}.tutorial-steps-grid.steps-3{grid-template-columns:repeat(3,1fr)}.tutorial-steps-grid.steps-4{grid-template-columns:repeat(2,1fr)}.tutorial-step-card{padding:28px 24px;border:1px solid var(--tut-card-border);border-radius:var(--tut-radius);background:var(--tut-card-bg);box-shadow:var(--tut-card-shadow);text-align:center}@media(prefers-reduced-motion:no-preference){.tutorial-step-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.tutorial-step-card:hover{transform:translateY(-4px)}}.tutorial-step-card:hover{border-color:var(--tut-card-border-hover);box-shadow:var(--tut-card-shadow-hover)}.tutorial-step-no{width:42px;height:42px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:var(--tut-step-no-bg);color:var(--brand);font-size:13px;font-weight:800}.tutorial-step-card h3{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--text)}.tutorial-step-card p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.65}.tutorial-step-tip{margin-top:12px;padding:10px 14px;border-left:3px solid var(--brand);border-radius:0 8px 8px 0;background:var(--tut-tip-bg);color:var(--text-soft);font-size:13px;line-height:1.65;text-align:left;display:flex;align-items:flex-start;gap:8px}.tutorial-tip-icon{flex-shrink:0;margin-top:2px;color:var(--brand)}.tutorial-notes{max-width:680px;margin:36px auto 0;padding:20px 24px;border:1px solid var(--tut-notes-border);border-radius:var(--tut-radius);background:var(--tut-notes-bg)}.tutorial-notes-title{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--pink);display:flex;align-items:center;gap:8px}.tutorial-notes-title svg{flex-shrink:0}.tutorial-notes ul{margin:0;padding-left:18px;list-style:disc}.tutorial-notes li{margin-bottom:6px;color:var(--text-soft);font-size:14px;line-height:1.65}.tutorial-notes li:last-child{margin-bottom:0}.tutorial-related{margin-top:36px;text-align:center}.tutorial-related p{margin:0 0 12px;color:var(--text-soft);font-size:14px}.tutorial-related a{color:var(--brand);font-weight:700;text-decoration:none;transition:color .15s ease}.tutorial-related a:hover{color:var(--brand-2)}@media(max-width:980px){.tutorial-hero{padding:calc(var(--nav-height) + 8px) 0 36px}.tutorial-steps-grid.steps-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.tutorial-tabs{gap:8px}.tutorial-tab{padding:8px 16px;font-size:13px}}@media(max-width:640px){.tutorial-hero{padding:calc(var(--nav-height) + 8px) 0 28px}.tutorial-steps-grid,.tutorial-steps-grid.steps-3,.tutorial-steps-grid.steps-4{grid-template-columns:1fr}.tutorial-step-card{padding:22px 18px}.tutorial-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}.tutorial-tabs::-webkit-scrollbar{display:none}.tutorial-tab{white-space:nowrap;flex-shrink:0}.tutorial-notes{padding:16px 18px}}@media(prefers-color-scheme:dark){.tutorial-hero{color:var(--text)}.tutorial-tab{background:#ffffff0f;border-color:#9778e62e}.tutorial-tab:hover{background:#ffffff1a;border-color:#9778e65c;color:var(--text)}.tutorial-tab.active{background:var(--button-gradient);border-color:transparent;color:#fff}.tutorial-section-desc{color:var(--text-soft)}.tutorial-step-card{border-color:var(--tut-card-border);background:var(--tut-card-bg)}.tutorial-step-card:hover{border-color:var(--tut-card-border-hover)}.tutorial-notes{border-color:var(--tut-notes-border);background:var(--tut-notes-bg)}}