.tutorial-world { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 85% 15%,#174c3d,#071d20 55%); color:#f3f3e6; }
#tutorial-network { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.tutorial-intro { padding-block:80px 90px; min-height:650px; position:relative; }
.tutorial-intro::before { content:""; position:absolute; inset:0 30% 0 -15%; z-index:-1; background:linear-gradient(90deg,#071d20ed,#071d2090,transparent); pointer-events:none; }
.tutorial-world .eyebrow { color:#e2c787; }
.tutorial-intro h1 { font-size:clamp(4.5rem,10vw,9rem); line-height:.92; letter-spacing:-.065em; margin:40px 0; }
.tutorial-world em { color:#dfc58a; font-family:Georgia,serif; font-weight:400; }
.tutorial-intro .tutorial-lead { max-width:560px; font-size:1.2rem; line-height:1.8; color:#d2e4d9; }
.tutorial-actions { display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:32px; }
.network-key { display:flex; align-items:center; gap:10px; font-size:.72rem; color:#abc4b6; margin-top:32px; letter-spacing:.04em; }
.network-key span { width:5px; height:5px; border-radius:50%; background:#80b9a1; margin-left:12px; }
.network-key span:first-child { margin-left:0; }.network-key span:nth-child(2) { background:#e0c887; }.network-key span:nth-child(3) { background:#ecf8ec; }
.learning-paths { padding-block:70px 80px; }
.learning-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:42px; }
.learning-heading h2 { font-size:clamp(2rem,3.5vw,3.4rem); line-height:1.1; max-width:550px; }
.learning-heading>p { color:#d2e4d9; line-height:1.8; max-width:380px; }
.learning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.learning-card { border:1px solid #7fb29855; background:linear-gradient(135deg,#11362fed,#092526ed); border-radius:16px; overflow:hidden; transition:border-color .25s,box-shadow .25s; }
.learning-card:hover,.learning-card[open] { border-color:#dbc186aa; box-shadow:0 12px 40px #0002; }
.learning-card summary { cursor:pointer; list-style:none; display:block; padding:36px; }
.learning-card summary::-webkit-details-marker { display:none; }
.path-number { font-size:.7rem; color:#b1cbbd; letter-spacing:.13em; }
.learning-card h3 { font-size:clamp(1.8rem,2.7vw,2.5rem); line-height:1.15; margin:30px 0 18px; color:#f3f3e6; }
.learning-card p { color:#c9ded0; line-height:1.8; }
.path-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:34px; font-size:.8rem; }
.path-status { color:#a9c1b3; }.path-open { color:#e6cf95; }.path-open b { display:inline-block; margin-left:12px; font-size:1.25rem; transition:transform .2s; }
.learning-card[open] .path-open b { transform:rotate(45deg); }
.path-outline { padding:0 36px 32px; border-top:1px solid #abc3aa30; }
.path-outline h4 { font-size:1.1rem; margin:26px 0 15px; }.path-outline ul { color:#d0e2d5; padding-left:20px; line-height:2; }
.path-outline .path-note { font-size:.83rem; color:#a9c1b3; }
.workshop-note { padding-block:50px 100px; border-top:1px solid #9ab49e50; }
.workshop-note h2 { font-size:clamp(2.5rem,4vw,4rem); line-height:1.15; }.workshop-note p { max-width:570px; line-height:1.8; color:#c9ded0; }.tutorial-world .text-link { color:#e6cf95; }
.learning-card summary:focus-visible,.tutorial-world a:focus-visible,.tutorial-world button:focus-visible { outline:3px solid #e2c787; outline-offset:-4px; }
@media(max-width:760px) { .learning-grid { grid-template-columns:1fr; }.learning-heading { display:block; }.tutorial-intro { min-height:560px; padding-block:50px; }.learning-card summary { padding:26px; }.path-outline { padding:0 26px 26px; }.learning-paths { padding-block:40px; }.network-key { font-size:.65rem; gap:6px; } }
@media(prefers-reduced-motion:reduce) { .learning-card,.path-open b { transition:none; } }