.roadmap-audience{font-size:12px;line-height:1.8;color:var(--muted);margin:18px 0 0}.roadmap-audience a{color:var(--teal);margin-left:12px;text-decoration:underline;text-underline-offset:3px}.roadmap-reader{max-width:1680px;width:calc(100% - 48px);margin:0 auto 24px;border:1px solid #ccd7e2;border-radius:12px;background:#fff;overflow:clip}.roadmap-intro{display:flex;align-items:center;gap:28px;padding:22px 24px;background:linear-gradient(110deg,#eef7f5,#f5f8fc)}.roadmap-intro>div{min-width:200px}.roadmap-intro .eyebrow{font-size:10px;margin-bottom:8px;color:var(--teal)}.roadmap-intro strong{font-size:17px}.roadmap-intro progress{display:block;width:100%;height:5px;margin-top:12px;border:0;border-radius:9px;accent-color:var(--teal);overflow:hidden;background:#dce7e7}.roadmap-intro progress::-webkit-progress-bar{background:#dce7e7}.roadmap-intro progress::-webkit-progress-value{background:var(--teal)}.roadmap-intro>p{font-size:12px;line-height:1.9;color:var(--muted);flex:1;margin:0}.roadmap-intro>button{border:1px solid #d4dfe3;background:#fff;padding:10px 12px;border-radius:6px;font-size:11px}.storage-warning{color:#8a5711;font-weight:600}.roadmap-controls{padding:12px 18px;border-block:1px solid var(--line);display:flex;align-items:center;gap:18px;flex-wrap:wrap}.view-switch{display:flex;padding:3px;border-radius:7px;background:#edf2f7}.view-switch button{background:transparent;border:0;padding:9px 17px;border-radius:5px;font-size:12px}.view-switch button[aria-pressed=true]{background:#132c45;color:white;box-shadow:0 2px 4px #132c4515}.roadmap-stage-picker{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.roadmap-stage-picker select{font-size:12px;padding:9px;max-width:285px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}.roadmap-zoom{display:flex;align-items:center;gap:6px;margin-left:auto}.roadmap-zoom button{border:1px solid var(--line);border-radius:5px;background:#fff;height:34px;min-width:34px;font-size:11px;padding-inline:9px}.roadmap-zoom button:hover{background:var(--teal-soft)}#roadmap-plus,#roadmap-minus{font-size:20px}#roadmap-zoom-label{min-width:38px;text-align:center;font:11px ui-monospace,monospace;color:var(--muted)}.roadmap-workspace{display:grid;grid-template-columns:180px minmax(0,1fr) 320px;align-items:start}.roadmap-directory{height:680px;overflow:auto;border-right:1px solid var(--line);padding:12px 8px;scrollbar-width:thin;background:#fbfcfe}.roadmap-directory button{border:0;display:flex;width:100%;text-align:left;gap:9px;background:transparent;border-radius:7px;padding:12px 8px;font-size:12px;line-height:1.6}.roadmap-directory button:hover{background:#edf3f7}.roadmap-directory button[aria-current]{background:#e5f3f1;color:var(--teal)}.stage-number{font:11px/1.8 ui-monospace,monospace;color:var(--teal)}.roadmap-directory small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.roadmap-content{min-width:0}#roadmap-viewport{height:644px;position:relative;overflow:clip;touch-action:none;cursor:grab;background:#e9eff5;background-image:radial-gradient(#b9cad7 1px,transparent 1px);background-size:18px 18px;outline-offset:-3px}#roadmap-viewport.dragging{cursor:grabbing}#roadmap-stage-canvas{position:absolute;inset:0 auto auto 0;transform-origin:0 0;user-select:none;will-change:transform;box-shadow:0 8px 25px #132c451a}#roadmap-stage-canvas>svg{display:block;width:100%;height:100%;pointer-events:none}.roadmap-hotspots{position:absolute;inset:0}.roadmap-hotspot{position:absolute;border:3px solid transparent;background:transparent;border-radius:10px;cursor:pointer}.roadmap-hotspot:hover{border-color:#087f8880}.roadmap-hotspot.node-selected{border-color:var(--teal);box-shadow:0 0 0 3px #fff9}.roadmap-hotspot:focus-visible{outline:4px solid var(--teal);outline-offset:3px}.roadmap-hotspot[data-state=mastered]{border-color:#2a8a65}.node-state{position:absolute;top:7px;right:10px;font-size:15px;line-height:1.5;font-family:AtlasDiagram,sans-serif;color:#65768a;padding:1px 6px;border-radius:5px;background:#ffffffd9}.node-state[data-state=learning]{color:#94651d;background:#fff1cf}.node-state[data-state=mastered]{color:#176b4b;background:#d9f0e4}.roadmap-canvas-hint{margin:0;height:36px;padding:10px 12px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);background:#f9fbfd}.roadmap-panel{height:680px;overflow:auto;border-left:1px solid var(--line);overscroll-behavior:contain;scrollbar-width:thin;background:#fff}.roadmap-panel>div{padding:26px 23px}#roadmap-panel-empty h2{font-size:23px;line-height:1.6;margin:0 0 16px}#roadmap-panel-empty p:not(.eyebrow){font-size:12px;line-height:1.9;color:var(--muted)}.roadmap-legend{border-top:1px solid var(--line);padding-top:18px;margin-top:25px}.roadmap-panel-heading{display:flex;align-items:start;gap:10px;justify-content:space-between}.roadmap-panel-heading .eyebrow{font-size:10px;line-height:1.8;letter-spacing:0;color:var(--teal);margin:0}.roadmap-panel-heading button{width:32px;min-width:32px;height:32px;font-size:24px;border:1px solid var(--line);border-radius:50%;background:#f7f9fc}#roadmap-node-title{font-size:22px;line-height:1.5;margin:14px 0 20px;outline:none}.node-status-label{display:block;font-size:11px;color:var(--muted);border:1px solid #cee2df;background:#f1f8f6;padding:12px;border-radius:7px}.node-status-label select{display:block;width:100%;margin-top:7px;padding:8px;color:var(--teal);border:1px solid #bcd7d2;background:white;border-radius:4px;font-size:13px}.node-guide h3{font-size:11px;letter-spacing:.05em;color:var(--teal);margin:25px 0 9px}.node-guide p,.node-guide li{font-size:12px;line-height:1.9;overflow-wrap:anywhere;color:#4c6074}.node-guide ul{padding-left:17px;margin:0}.node-guide li+li{margin-top:6px}.node-guide a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}.node-guide a:hover{color:#09565d}#copy-node-link{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:#f4f7fa;margin-top:24px;font-size:12px}#node-share-url{width:100%;margin-top:10px;font-size:11px;padding:8px;border:1px solid var(--line)}#roadmap-copy-status{font-size:11px;color:var(--teal);line-height:1.7}.roadmap-node-pager{display:flex;justify-content:space-between;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.roadmap-node-pager button{font-size:11px;border:1px solid var(--line);border-radius:5px;background:#fff;padding:8px}#roadmap-list{height:680px;overflow:auto;overscroll-behavior:contain;padding:24px;scrollbar-width:thin;background:#f6f9fc}.learning-stage{scroll-margin-top:24px;margin-bottom:32px}.learning-stage>header{display:flex;gap:14px;align-items:start;margin-bottom:15px}.learning-stage>header>span{font:16px/1.5 ui-monospace,monospace;color:var(--teal);border-bottom:2px solid var(--teal);padding-bottom:4px}.learning-stage h2{font-size:18px;line-height:1.6;margin:0 0 6px}.learning-stage header p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.learning-stage header>small{font-size:10px;white-space:nowrap;color:var(--muted);margin-left:auto;padding-top:5px}.learning-nodes{display:grid;grid-template-columns:1fr;gap:12px}.learning-node{border:1px solid var(--line);border-radius:9px;background:#fff;overflow:clip}.learning-node summary{display:grid;grid-template-columns:1fr auto;gap:8px;padding:18px;cursor:pointer;list-style:none}.learning-node summary::-webkit-details-marker{display:none}.learning-node summary:hover,.learning-node summary.node-selected{background:#edf7f5}.learning-node summary.node-selected{box-shadow:inset 3px 0 0 var(--teal)}.learning-meta{font-size:10px;color:var(--teal);grid-column:1}.learning-title{font-size:16px;font-weight:600;grid-column:1}.learning-goal{font-size:12px;line-height:1.8;color:var(--muted);grid-column:1/-1}.learning-state{font-size:10px;color:var(--muted);grid-column:2;grid-row:1;white-space:nowrap}.learning-state[data-state=learning]{color:#916214}.learning-state[data-state=mastered]{color:#16734f}.learning-node>.node-guide{padding:0 18px 18px}.roadmap-card .card-preview img{min-height:0}.roadmap-page .detail-notes{padding-top:24px}
@media(min-width:1650px){.roadmap-workspace{grid-template-columns:210px minmax(0,1fr) 340px}.roadmap-directory,.roadmap-panel,#roadmap-list{height:760px}#roadmap-viewport{height:724px}.learning-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1150px){.roadmap-workspace{grid-template-columns:minmax(0,1fr) 300px}.roadmap-directory{display:none}.roadmap-controls{gap:12px}.roadmap-intro{gap:20px}.roadmap-stage-picker select{max-width:240px}.roadmap-panel>div{padding:22px 18px}.roadmap-reader{width:calc(100% - 32px)}}
@media(max-width:820px){.roadmap-workspace{grid-template-columns:1fr}.roadmap-panel{display:none}.roadmap-panel.active{display:block;position:fixed;inset:auto 0 0;height:auto;max-height:52dvh;width:100%;z-index:120;border:1px solid #b8cbd7;border-radius:18px 18px 0 0;box-shadow:0 -12px 35px #132c4525;padding-bottom:env(safe-area-inset-bottom)}.roadmap-panel.active:before{content:'';display:block;width:36px;height:4px;border-radius:9px;background:#cbd5df;margin:9px auto 0}.roadmap-panel>div{padding:12px 23px 24px}.roadmap-panel-heading button{width:40px;min-width:40px;height:40px}.node-guide p,.node-guide li{font-size:14px}.node-guide h3{font-size:12px}#roadmap-list{height:auto;max-height:none;padding:22px 18px;overflow:visible}.learning-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-goal{font-size:13px}.roadmap-intro{flex-wrap:wrap;padding:20px;gap:16px}.roadmap-intro>div{min-width:180px;flex:1}.roadmap-intro>p{flex-basis:100%;order:3}.roadmap-intro>button{font-size:10px}.roadmap-zoom{margin-left:0}.roadmap-stage-picker{margin-left:auto}.roadmap-stage-picker select{max-width:260px}.roadmap-zoom button{height:40px;min-width:40px}.view-switch button{padding:11px 14px}#roadmap-viewport{height:60dvh;min-height:360px}.roadmap-audience a{display:block;margin:8px 0 0}.roadmap-node-pager button{font-size:12px;padding:12px}.node-status-label select{padding:11px}}
@media(max-width:560px){.roadmap-reader{width:calc(100% - 24px)}.roadmap-intro{padding:17px 14px}.roadmap-intro strong{font-size:15px}.roadmap-intro>div{min-width:140px}.roadmap-controls{padding:10px;gap:10px}.roadmap-stage-picker{width:100%;margin:0}.roadmap-stage-picker select{max-width:none;min-width:0;flex:1;width:100%;padding:11px 8px}.roadmap-zoom{width:100%;justify-content:space-between}.learning-nodes{grid-template-columns:1fr}.learning-stage header>small{display:none}.learning-stage h2{font-size:18px}.learning-stage>header{gap:10px}.learning-node summary{padding:16px}.learning-title{font-size:17px}#roadmap-list{padding:20px 14px}.roadmap-canvas-hint{font-size:9px}.roadmap-panel.active{max-height:55dvh}.roadmap-panel-heading button{width:44px;min-width:44px;height:44px}}