.topic-track{position:relative;display:flex;flex-direction:column;align-items:center;gap:44px;padding:22px 0 45px;background:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--amber) 10%,transparent),transparent 25%),radial-gradient(circle at 82% 58%,color-mix(in srgb,var(--mint) 9%,transparent),transparent 28%)}.island-stage{position:relative;display:grid;justify-items:center;gap:13px;width:100%;z-index:1}.island-stage:not(:last-child)::after{content:"";position:absolute;z-index:-1;top:100%;height:44px;width:5px;border-radius:9px;background:repeating-linear-gradient(to bottom,var(--road) 0 10px,transparent 10px 18px)}.section-island{position:relative;z-index:2;width:clamp(145px,18vw,180px)!important;min-height:145px!important;aspect-ratio:1;border-radius:50%!important}.task-chain{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:10px;width:96px;padding:2px 8px 14px;position:relative}.task-chain::before{content:"";position:absolute;top:-6px;bottom:4px;left:50%;z-index:-1;border-left:3px dotted color-mix(in srgb,var(--amber) 55%,var(--line))}.task-chain .mini-island:nth-child(odd){transform:translateX(-17px)}.task-chain .mini-island:nth-child(even){transform:translateX(17px)}.task-chain .mini-island:hover:not(.locked){transform:translateX(17px) translateY(-3px) scale(1.08)}.task-chain .mini-island:nth-child(odd):hover:not(.locked){transform:translateX(-17px) translateY(-3px) scale(1.08)}.mini-island{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border:2px solid var(--paper);border-radius:50%;background:var(--paper-soft);color:var(--muted);font-size:11px;font-weight:900;box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 12%,transparent),0 5px 9px color-mix(in srgb,var(--ink) 12%,transparent);transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease}.mini-island:hover:not(.locked){transform:translateY(-3px) scale(1.08);border-color:var(--brand);color:var(--brand-deep)}.mini-island.solved{background:var(--mint);border-color:var(--paper);color:#fff}.mini-island.star-task{background:color-mix(in srgb,var(--amber) 18%,var(--paper-soft));border-color:var(--amber);color:var(--brand-deep)}.mini-island.star-task.solved{background:var(--amber);color:#fff}.mini-island.star-task b{position:absolute;right:-4px;top:-10px;color:var(--amber);font-size:11px;text-shadow:0 1px 0 var(--paper)}.mini-island.checkpoint{width:42px;height:42px;background:linear-gradient(145deg,var(--coral),#ffb16e);color:#fff;border-color:var(--paper)}.mini-island.locked{opacity:.45;filter:grayscale(.6);cursor:not-allowed}.map-start{position:absolute;right:14px;bottom:14px;z-index:8;display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid var(--paper);border-radius:50%;background:var(--brand);color:#fff;font-size:21px;line-height:1;box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 14%,transparent),0 10px 18px color-mix(in srgb,var(--brand) 26%,transparent)}.map-start:active{transform:scale(.94)}.bottom-course-tools{gap:12px}.bottom-course-tools .help-round,.mobile-dock .help-round{background:linear-gradient(145deg,var(--violet),var(--brand));color:#fff;border-color:var(--paper);border-radius:50%;font-weight:950}.bottom-course-tools .help-round{width:76px;height:76px;min-width:76px;margin-top:-18px;border-width:3px;font-size:25px}.bottom-course-tools .help-round span{font-size:10px}.mobile-dock .help-round{font-size:16px}.mobile-dock .help-round br+*{font-size:9px}@media(max-width:720px){.topic-track{gap:30px}.island-stage:not(:last-child)::after{height:30px}.section-island{width:124px!important;min-height:124px!important}.task-chain{gap:7px;width:82px}.mini-island{width:29px;height:29px;font-size:9px}.mini-island.checkpoint{width:36px;height:36px}.mini-island.star-task b{right:-3px;top:-9px;font-size:9px}.map-start{right:9px;bottom:9px;width:34px;height:34px;font-size:18px}.bottom-course-tools .help-round{width:68px;height:68px;min-width:68px;margin-top:-15px;font-size:22px}}
.course-map{position:relative;overflow:auto;background-image:radial-gradient(circle at 14px 18px,color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 1.5px),linear-gradient(155deg,color-mix(in srgb,var(--amber) 10%,var(--paper)),var(--paper) 42%,color-mix(in srgb,var(--mint) 8%,var(--paper)));background-size:28px 28px,100% 100%}.course-map::before{content:"🧭";position:absolute;top:14px;right:16px;z-index:4;font-size:24px;filter:drop-shadow(0 2px 2px color-mix(in srgb,var(--ink) 18%,transparent))}
.task-chain{flex-direction:column-reverse}.task-chain::before{border-left-color:color-mix(in srgb,var(--amber) 75%,var(--line))}