.tutorial-page{padding-top:0}.tutorial-hero{padding-top:156px;min-height:820px;display:flex;align-items:center}.tutorial-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}.tutorial-hero h1{margin:22px 0 20px;font-size:clamp(43px,5vw,70px);line-height:1;letter-spacing:-.055em}.tutorial-hero h1 span{color:var(--primary)}.tutorial-hero-copy>p{margin:0;max-width:690px;color:var(--muted);font-size:16px;line-height:1.78}.tutorial-meta{display:flex;flex-wrap:wrap;gap:17px 22px;margin-top:26px}.tutorial-meta span{display:flex;align-items:center;gap:7px;color:#5d697d;font-size:12px;font-weight:700}.tutorial-meta svg{width:16px;color:var(--primary)}
.tutorial-stage{position:relative}.learning-window{border-radius:28px;padding:10px;box-shadow:0 30px 80px rgba(61,74,94,.2)}.learning-topbar{height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px}.learning-topbar>strong{font-size:11px;color:#6c788b}.traffic{display:flex;gap:6px}.traffic i{width:8px;height:8px;border-radius:50%;background:#b8c2d0}.traffic i:first-child{background:#ff7c8d}.traffic i:nth-child(2){background:#f2bf58}.traffic i:nth-child(3){background:#47ca9c}.academy-badge{justify-self:end;display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border-radius:10px;background:rgba(92,92,226,.09);color:var(--primary);font-size:9px;font-weight:800}.academy-badge svg{width:12px}.learning-body{display:grid;grid-template-columns:56px 1fr 130px;min-height:440px;border-radius:20px;overflow:hidden;background:rgba(238,243,248,.87);border:1px solid rgba(255,255,255,.8)}.learning-sidebar{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 7px;background:rgba(255,255,255,.47);border-right:1px solid rgba(255,255,255,.86)}.learning-sidebar span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#8792a3}.learning-sidebar span.active{background:var(--primary-soft);color:var(--primary)}.learning-sidebar svg{width:16px}.video-demo{padding:18px;min-width:0}.video-demo-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.video-demo-head span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:9px;font-weight:800}.video-demo-head b{font-size:12px}.fake-video-screen{height:285px;border-radius:17px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#dfe6ee,#eef3f8);box-shadow:inset 4px 4px 10px rgba(118,133,152,.16),inset -4px -4px 10px white}.paper-demo{width:156px;height:224px;background:#fff;padding:10px;box-shadow:0 13px 26px rgba(63,75,92,.19);transform:rotate(-2deg)}.paper-demo-head{height:25px;background:#1c2430;margin-bottom:7px}.paper-demo-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:67px 50px;gap:5px}.paper-demo-grid i{background:#e6ebf2}.paper-demo-grid i:first-child{grid-row:1/3}.paper-demo-lines{display:grid;gap:4px;margin-top:7px}.paper-demo-lines i{height:3px;border-radius:10px;background:#d9e0e9}.play-orb,.mini-play{border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),#7a6bec);box-shadow:0 12px 28px rgba(92,92,226,.34)}.play-orb{position:absolute;width:58px;height:58px;border-radius:50%}.play-orb svg{width:23px;fill:currentColor}.video-progress{height:5px;background:#dbe2ec;border-radius:10px;overflow:hidden;margin-top:14px}.video-progress span{display:block;width:52%;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent))}.lesson-footer{display:flex;justify-content:space-between;margin-top:8px;color:#7b8798;font-size:9px}.lesson-footer strong{color:#4d596b}.lesson-list{padding:18px 12px;background:rgba(255,255,255,.45);border-left:1px solid rgba(255,255,255,.85);display:flex;flex-direction:column;gap:9px}.lesson-list>small{font-size:8px;font-weight:800;color:#9aa4b3;letter-spacing:.1em;margin-bottom:2px}.lesson-list span{min-height:32px;border-radius:9px;padding:7px;display:flex;align-items:center;gap:7px;font-size:8px;font-weight:700;color:#7b8798}.lesson-list span b{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;background:#e9eef5;font-size:7px}.lesson-list span.done{color:#5d6a7d}.lesson-list span.done svg{width:13px;color:var(--accent)}.lesson-list span.current{background:rgba(92,92,226,.09);color:var(--primary)}.lesson-list span.current b{background:var(--primary);color:#fff}.floating-learning{position:absolute;right:-22px;bottom:-26px;border-radius:17px;padding:12px 15px;display:flex;align-items:center;gap:10px;min-width:220px}.floating-learning>svg{width:27px;color:var(--accent)}.floating-learning small{display:block;color:#8792a2;font-size:8px;margin-bottom:3px}.floating-learning strong{font-size:10px}
.quick-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.quick-guide{border-radius:20px;padding:16px;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;transition:.24s ease}.quick-guide:hover{transform:translateY(-4px)}.quick-guide>span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--primary);background:rgba(92,92,226,.08)}.quick-guide>span svg{width:20px}.quick-guide div{display:grid;gap:4px}.quick-guide strong{font-size:13px}.quick-guide small{color:var(--muted);font-size:10px;line-height:1.5}.quick-guide>svg{width:17px;color:#8290a3}
.tutorial-library{padding-top:78px}.tutorial-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border-radius:20px;margin-bottom:28px}.tutorial-search{min-width:245px;display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:12px;background:rgba(255,255,255,.55);box-shadow:inset 2px 2px 5px rgba(126,142,162,.1),inset -2px -2px 5px #fff}.tutorial-search svg{width:17px;color:#8b96a6}.tutorial-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}.tutorial-filters{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.tutorial-filters button{border:0;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.37);color:#687589;font-size:10px;font-weight:800;cursor:pointer}.tutorial-filters button.active{color:#fff;background:linear-gradient(135deg,var(--primary),#7373ef);box-shadow:0 8px 18px rgba(92,92,226,.22)}.tutorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tutorial-card{border-radius:24px;padding:18px;min-width:0;transition:.25s ease}.tutorial-card:hover{transform:translateY(-5px)}.tutorial-card[hidden]{display:none!important}.tutorial-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.tutorial-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.tutorial-icon svg{width:19px}.lesson-tags{text-align:right;display:grid;gap:3px}.lesson-tags small{color:#8994a5;font-size:8px;font-weight:700}.lesson-tags b{font-size:9px;color:#4e5a6e}.tutorial-thumb{height:145px;border-radius:16px;background:linear-gradient(145deg,#dfe6ee,#f2f6fa);position:relative;overflow:hidden;box-shadow:inset 3px 3px 7px rgba(120,136,155,.11),inset -3px -3px 8px white}.thumb-browser{height:24px;padding:8px;display:flex;gap:4px;background:rgba(255,255,255,.48)}.thumb-browser span{width:5px;height:5px;border-radius:50%;background:#aab5c3}.thumb-content{margin:14px;display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:43px 35px;gap:6px}.thumb-content i{background:rgba(255,255,255,.8);border-radius:6px}.thumb-content i:first-child{grid-row:1/3}.thumb-content i:nth-child(4){display:none}.mini-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%}.mini-play svg{width:17px;fill:currentColor}.tutorial-card-copy{padding-top:16px}.level-badge{display:inline-flex;padding:6px 8px;border-radius:8px;background:rgba(45,196,166,.10);color:#24967e;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.tutorial-card h3{margin:11px 0 8px;font-size:16px;letter-spacing:-.02em}.tutorial-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}.lesson-link{border:0;background:transparent;padding:13px 0 0;color:var(--primary);font-size:10px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:5px}.lesson-link svg{width:13px}.empty-tutorial-state{border-radius:22px;padding:34px;text-align:center;display:grid;place-items:center;gap:7px}.empty-tutorial-state svg{width:28px;color:#8d98a8}.empty-tutorial-state strong{font-size:14px}.empty-tutorial-state span{font-size:11px;color:var(--muted)}
.walkthrough-track{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.walk-step{border-radius:20px;padding:20px;min-height:190px;position:relative;overflow:hidden}.walk-step>span{position:absolute;right:14px;top:8px;font-size:31px;font-weight:800;color:rgba(92,92,226,.10)}.walk-step>svg{width:23px;color:var(--primary);margin-bottom:20px}.walk-step h3{margin:0 0 8px;font-size:15px}.walk-step p{margin:0;color:var(--muted);font-size:10px;line-height:1.6}
.ai-tutorial-grid,.pdf-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}.ai-tutorial-card{border-radius:28px;padding:28px}.ai-demo-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.ai-demo-toolbar span{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px}.ai-demo-toolbar span svg{width:18px;color:var(--primary)}.ai-demo-toolbar small{padding:6px 8px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:8px;font-weight:800}.ai-tutorial-card label{display:block;color:#718095;font-size:9px;font-weight:800;margin:10px 0 6px}.tutorial-input{padding:12px 13px;border-radius:12px;background:rgba(255,255,255,.58);box-shadow:inset 2px 2px 5px rgba(127,143,161,.12),inset -2px -2px 5px white;font-size:11px;color:#425065}.ai-demo-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ai-action-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.ai-action-pills span{padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.56);color:#59677b;font-size:8px;font-weight:800}.ai-action-pills span:first-child{background:var(--primary-soft);color:var(--primary)}.ai-result{margin-top:16px;border-radius:14px;padding:14px;background:rgba(45,196,166,.07);border:1px solid rgba(45,196,166,.13)}.ai-result small{display:block;color:#299b84;font-size:8px;font-weight:800;margin-bottom:5px}.ai-result strong{font-size:10px;color:#4a586c}.ai-tutorial-copy h2,.pdf-check-copy h2{margin:10px 0 13px;font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-.045em}.ai-tutorial-copy>p,.pdf-check-copy>p{color:var(--muted);line-height:1.72;font-size:14px}
.pdf-preview{border-radius:28px;padding:22px}.pdf-preview-top{display:flex;align-items:center;justify-content:space-between;color:#5a677b;font-size:10px;font-weight:700}.pdf-preview-top span{display:flex;align-items:center;gap:7px}.pdf-preview-top svg{width:17px;color:var(--primary)}.pdf-paper{width:min(78%,330px);height:420px;background:#fff;margin:20px auto;padding:18px;box-shadow:0 18px 40px rgba(68,80,97,.18)}.pdf-masthead{height:43px;background:#18202b;margin-bottom:12px}.pdf-columns{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:118px 80px;gap:8px}.pdf-columns span{background:#e5eaf0}.pdf-columns span:first-child{grid-row:1/3}.pdf-copy-lines{display:grid;gap:6px;margin-top:10px}.pdf-copy-lines i{height:4px;border-radius:10px;background:#e0e5eb}.pdf-actions{display:flex;justify-content:center;gap:8px}.pdf-actions span{display:flex;align-items:center;gap:4px;padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.58);color:#667389;font-size:8px;font-weight:800}.pdf-actions svg{width:12px}.publish-checklist{display:grid;gap:10px;margin-top:25px}.publish-checklist label{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:13px;background:rgba(255,255,255,.43)}.publish-checklist label span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(45,196,166,.11);color:#299b84}.publish-checklist label svg{width:13px}.publish-checklist label b{font-size:10px;line-height:1.5;color:#536074}
.tutorial-note{border-radius:27px;padding:27px;display:grid;grid-template-columns:58px 1fr auto;gap:20px;align-items:center}.note-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#7b72ef);color:#fff;box-shadow:0 12px 28px rgba(92,92,226,.27)}.note-icon svg{width:25px}.tutorial-note h2{margin:8px 0;font-size:24px;letter-spacing:-.035em}.tutorial-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.tutorial-modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:20px}.tutorial-modal.open{display:grid}.tutorial-modal-backdrop{position:absolute;inset:0;background:rgba(31,40,55,.36);backdrop-filter:blur(7px)}.tutorial-modal-card{position:relative;z-index:2;width:min(760px,100%);max-height:min(720px,90vh);overflow:auto;border-radius:28px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.modal-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.75);cursor:pointer;z-index:4}.modal-close svg{width:17px}.modal-video-placeholder{min-height:330px;border-radius:20px;background:linear-gradient(145deg,#dfe6ee,#eff4f8);display:grid;place-content:center;text-align:center;padding:25px;gap:8px}.modal-video-placeholder span{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;margin:0 auto 5px;color:#fff;background:linear-gradient(135deg,var(--primary),#7b70ef);box-shadow:0 14px 30px rgba(92,92,226,.3)}.modal-video-placeholder svg{width:28px}.modal-video-placeholder strong{font-size:13px}.modal-video-placeholder small{color:var(--muted);font-size:9px;line-height:1.5}.modal-lesson-copy{padding:18px 6px 6px}.modal-category{display:inline-flex;padding:6px 8px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:8px;font-weight:800}.modal-lesson-copy h2{margin:13px 0 10px;font-size:28px;letter-spacing:-.035em}.modal-lesson-copy p{color:var(--muted);font-size:12px;line-height:1.68}.modal-lesson-meta{display:flex;gap:8px;margin:15px 0}.modal-lesson-meta span{padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.6);font-size:8px;font-weight:800;color:#596679}.modal-steps{display:grid;gap:8px}.modal-step{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.46);font-size:9px;font-weight:700;color:#58667a}.modal-step b{width:21px;height:21px;border-radius:7px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:7px}
@media(max-width:1120px){.desktop-nav a{padding:9px 8px;font-size:11px}.tutorial-grid{grid-template-columns:repeat(3,1fr)}.learning-body{grid-template-columns:50px 1fr 115px}.walkthrough-track{grid-template-columns:repeat(3,1fr)}}
@media(max-width:920px){.tutorial-hero{padding-top:135px}.tutorial-hero-grid{grid-template-columns:1fr;gap:48px}.tutorial-stage{max-width:680px;margin:auto;width:100%}.quick-guide-grid{grid-template-columns:1fr}.tutorial-tools{align-items:stretch;flex-direction:column}.tutorial-filters{justify-content:flex-start}.tutorial-grid{grid-template-columns:repeat(2,1fr)}.walkthrough-track{grid-template-columns:repeat(2,1fr)}.ai-tutorial-grid,.pdf-check-grid{grid-template-columns:1fr;gap:42px}.tutorial-note{grid-template-columns:58px 1fr}.tutorial-note>.btn{grid-column:2}.tutorial-modal-card{grid-template-columns:1fr;max-width:600px}.modal-video-placeholder{min-height:230px}}
@media(max-width:720px){.tutorial-hero{min-height:auto;padding-bottom:65px}.tutorial-hero h1{font-size:42px}.learning-body{grid-template-columns:45px 1fr}.lesson-list{display:none}.fake-video-screen{height:240px}.floating-learning{right:8px}.tutorial-grid{grid-template-columns:1fr}.walkthrough-track{grid-template-columns:1fr 1fr}.tutorial-search{min-width:0;width:100%}.tutorial-filters{overflow:auto;flex-wrap:nowrap;padding-bottom:2px}.tutorial-filters button{white-space:nowrap}.pdf-paper{height:360px}.tutorial-note{grid-template-columns:1fr}.tutorial-note>.btn{grid-column:auto;justify-self:start}.note-icon{width:52px;height:52px}.tutorial-modal{padding:10px}.tutorial-modal-card{padding:18px}.modal-lesson-copy h2{font-size:23px}}
@media(max-width:520px){.tutorial-hero h1{font-size:37px}.tutorial-meta{display:grid}.learning-topbar{grid-template-columns:1fr auto}.learning-topbar>strong{display:none}.learning-body{grid-template-columns:1fr}.learning-sidebar{display:none}.video-demo{padding:14px}.fake-video-screen{height:225px}.floating-learning{position:relative;right:auto;bottom:auto;margin-top:12px}.walkthrough-track{grid-template-columns:1fr}.quick-guide{grid-template-columns:42px 1fr}.quick-guide>svg{display:none}.ai-demo-row{grid-template-columns:1fr}.pdf-paper{width:88%;height:330px}.pdf-columns{grid-template-rows:90px 65px}}