.tutorial-page{margin:0;background:#fff;color:#111a35}.tutorial-hero{padding:150px 0 66px;background:radial-gradient(circle at 80% 15%,#eef2ff 0,transparent 34%),#fff}.tutorial-hero h1{max-width:780px;margin:14px 0 20px;font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.065em}.tutorial-hero h1 em{color:#365df5;font-style:normal}.tutorial-hero>div>p:not(.eyebrow){max-width:680px;color:#60708e;font-size:19px;line-height:1.65}.tutorial-progress{display:grid;grid-template-columns:auto minmax(140px,330px) 44px;align-items:center;gap:15px;margin-top:38px;color:#65718a;font-size:13px}.tutorial-progress>div{height:7px;overflow:hidden;border-radius:99px;background:#e8ecf5}.tutorial-progress i{display:block;width:0;height:100%;border-radius:inherit;background:#365df5;transition:width .3s}.tutorial-workspace{padding:58px 0 100px;background:#f7f9fc;border-top:1px solid #e8ecf4}.tutorial-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}.tutorial-index,.tutorial-player{border:1px solid #e1e6ef;border-radius:22px;background:#fff;box-shadow:0 18px 55px rgba(25,42,82,.06)}.tutorial-index{position:sticky;top:92px;padding:16px}.tutorial-group+ .tutorial-group{margin-top:20px}.tutorial-group h2{margin:0 0 7px;padding:0 10px;color:#8a95aa;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.tutorial-item{display:grid;width:100%;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;margin:2px 0;padding:9px;border:0;border-radius:12px;background:transparent;color:#66728b;text-align:left;cursor:pointer}.tutorial-item:hover{background:#f4f6fb}.tutorial-item.active{background:#edf1ff;color:#111a35}.tutorial-item>span{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:#f0f3f8;font-size:18px}.tutorial-item.active>span{background:#365df5;color:#fff}.tutorial-item b,.tutorial-item small{display:block}.tutorial-item b{font-size:12px}.tutorial-item small{margin-top:2px;color:#8994a8;font-size:10px}.tutorial-item>i{color:#20ad6b;font-style:normal}.tutorial-chips{display:none}.tutorial-player{overflow:hidden}.tutorial-heading{padding:30px 34px;border-bottom:1px solid #e7ebf2}.tutorial-heading>div{display:flex;gap:10px;align-items:center}.tutorial-heading span{padding:6px 10px;border-radius:99px;background:#edf1ff;color:#365df5;font-size:11px;font-weight:800}.tutorial-heading small{color:#8994a8}.tutorial-heading h2{margin:19px 0 8px;font-size:32px;letter-spacing:-.04em}.tutorial-heading p{max-width:760px;margin:0;color:#64718a;line-height:1.65}.tutorial-screen{margin:28px 34px 0;overflow:hidden;border-radius:18px;background:#101827;color:#fff;box-shadow:0 16px 44px rgba(16,24,39,.16)}.tutorial-window{display:flex;align-items:center;gap:7px;height:46px;padding:0 17px;border-bottom:1px solid #263044}.tutorial-window i{width:9px;height:9px;border-radius:50%;background:#ff6159}.tutorial-window i:nth-child(2){background:#f6bd3a}.tutorial-window i:nth-child(3){background:#2bcb69}.tutorial-window small{margin-left:auto;color:#8f9aaf}.tutorial-scene{display:grid;min-height:340px;place-items:center;align-content:center;padding:40px;text-align:center}.tutorial-scene>span{color:#7892ff;font-size:11px;font-weight:800;letter-spacing:.14em}.tutorial-symbol{margin:15px 0 4px;font-size:42px}.tutorial-scene h3{max-width:600px;margin:8px 0 24px;font-size:25px;line-height:1.3}.tutorial-scene-progress{width:min(360px,80%);height:6px;overflow:hidden;border-radius:99px;background:#27334a}.tutorial-scene-progress i{display:block;height:100%;background:#6484ff;transition:width .25s}.tutorial-scene button{margin-top:22px;padding:11px 17px;border:0;border-radius:11px;background:#fff;color:#111a35;font-weight:750;cursor:pointer}.tutorial-outcomes{padding:28px 34px}.tutorial-outcomes h3{margin:0 0 13px;font-size:14px}.tutorial-outcomes ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none}.tutorial-outcomes li{padding:14px;border:1px solid #e4e8f0;border-radius:13px;color:#67738a;font-size:12px;line-height:1.5}.tutorial-outcomes li:before{content:'✓';margin-right:7px;color:#16a765;font-weight:800}.tutorial-actions{display:flex;justify-content:space-between;gap:12px;padding:20px 34px;border-top:1px solid #e7ebf2}.tutorial-actions button{padding:11px 16px;border:0;border-radius:11px;background:transparent;color:#365df5;font-weight:750;cursor:pointer}.tutorial-actions [data-complete]{background:#365df5;color:#fff}.tutorial-actions [data-complete].done{background:#e9f8f1;color:#148755}
@media(max-width:850px){.tutorial-hero{padding:112px 0 48px}.tutorial-grid{grid-template-columns:1fr}.tutorial-index{position:static;padding:12px;overflow:hidden}.tutorial-index>div:last-child{display:none}.tutorial-chips{display:flex;gap:8px;overflow-x:auto}.tutorial-chips button{flex:none;padding:8px 12px;border:1px solid #e1e6ef;border-radius:99px;background:#fff;color:#64718a}.tutorial-chips button.active{border-color:#b8c5ff;background:#edf1ff;color:#3156e8}.tutorial-heading,.tutorial-outcomes,.tutorial-actions{padding-left:20px;padding-right:20px}.tutorial-screen{margin-left:14px;margin-right:14px}.tutorial-outcomes ul{grid-template-columns:1fr}.tutorial-scene{min-height:300px;padding:28px 18px}}
@media(max-width:520px){.tutorial-hero .shell,.tutorial-workspace .shell{width:calc(100% - 40px)}.tutorial-hero h1{font-size:44px}.tutorial-progress{grid-template-columns:1fr 38px}.tutorial-progress span{grid-column:1/-1}.tutorial-heading h2{font-size:25px}.tutorial-scene h3{font-size:20px}.tutorial-actions{align-items:stretch;flex-direction:column}.tutorial-actions button{width:100%}}

/* Compact dismissible introduction and readable lesson labels. */
.tutorial-hero{padding:104px 0 24px;background:#f7f9fc}
.tutorial-hero .shell{position:relative;box-sizing:border-box;padding:24px 68px 24px 28px;border:1px solid #e1e6ef;border-radius:20px;background:#fff;box-shadow:0 14px 40px rgba(25,42,82,.055)}
.tutorial-hero h1{max-width:none;margin:7px 0 7px;font-size:clamp(27px,3vw,38px);line-height:1.08;letter-spacing:-.045em}
.tutorial-hero>div>p:not(.eyebrow){max-width:none;margin:0;color:#66738b;font-size:15px;line-height:1.55}
.tutorial-hero .tutorial-progress{max-width:440px;margin-top:18px}
.tutorial-intro-close{position:absolute;top:18px;right:20px;display:grid;width:34px;height:34px;place-items:center;border:1px solid #e1e6ef;border-radius:11px;background:#f8f9fc;color:#65718a;font-size:23px;line-height:1;cursor:pointer}
.tutorial-intro-close:hover{background:#eef1f6;color:#17213a}
.tutorial-hero[hidden]{display:none!important}
.tutorial-item>span:first-child{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:#f0f3f8;font-size:18px}
.tutorial-item>span:nth-child(2){display:block;min-width:0;width:auto;height:auto;border-radius:0;background:transparent;font-size:inherit}
.tutorial-item.active>span:first-child{background:#365df5;color:#fff}
.tutorial-item.active>span:nth-child(2){background:transparent;color:inherit}
@media(max-width:850px){.tutorial-hero{padding:90px 0 18px}.tutorial-hero .shell{padding:21px 58px 21px 22px}.tutorial-hero h1{font-size:28px}.tutorial-hero .tutorial-progress{margin-top:15px}}
@media(max-width:520px){.tutorial-hero .shell{width:calc(100% - 32px);border-radius:17px}.tutorial-hero h1{font-size:25px}.tutorial-intro-close{top:14px;right:14px}}
.tutorial-progress-row{padding:18px 0 12px;background:#f7f9fc}
.tutorial-progress-row .shell{display:grid;grid-template-columns:auto minmax(160px,420px) 38px;align-items:center;justify-content:end;gap:12px;box-sizing:border-box;padding:12px 16px;border:1px solid #e1e6ef;border-radius:15px;background:#fff;color:#6a7690;font-size:12px;box-shadow:0 10px 30px rgba(25,42,82,.04)}
.tutorial-progress-row .shell>div{height:6px;overflow:hidden;border-radius:99px;background:#e8ecf5}
.tutorial-progress-row i{display:block;width:0;height:100%;border-radius:inherit;background:#365df5;transition:width .3s}
.tutorial-progress-row strong{text-align:right}
.tutorial-progress-row+.tutorial-workspace{padding-top:14px}
@media(max-width:520px){.tutorial-progress-row{padding:12px 0 8px}.tutorial-progress-row .shell{width:calc(100% - 32px);grid-template-columns:1fr 34px}.tutorial-progress-row .shell>span{grid-column:1/-1}.tutorial-progress-row .shell>div{grid-column:1}}
.tutorial-item>span:nth-child(2){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.tutorial-item>span:nth-child(2) b{min-width:0;text-align:left}
.tutorial-item>span:nth-child(2) small{margin:0;white-space:nowrap;text-align:right}