/* 学习路径首屏：旋转卡片环 */
.orb{position:relative;height:clamp(560px,calc(100svh - 82px),920px);overflow:hidden;overflow:clip;background:var(--bg);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;isolation:isolate}
.orb.is-dragging{cursor:grabbing}
.orb-ring{position:absolute;inset:0;visibility:hidden;-webkit-mask-image:linear-gradient(#000 66%,transparent 97%);mask-image:linear-gradient(#000 66%,transparent 97%)}
.orb.is-live .orb-ring{visibility:visible}
.orb-tile{--s:96px;position:absolute;left:0;top:0;width:var(--s);height:var(--s);padding:0;border:0;border-radius:12%;background:var(--orb-tile);color:var(--orb-ink);cursor:pointer;will-change:transform;transition:box-shadow .2s ease,background .2s ease}
.orb.is-dragging .orb-tile{cursor:grabbing}
.orb-art{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:var(--orb-ink-alpha);transition:opacity .2s,color .2s}
.orb-art circle{fill:currentColor;stroke:none}
.orb-layers circle{fill:none;stroke:currentColor}
.orb-histo rect{fill:currentColor;stroke:none}
.orb-tile img{width:100%;height:100%;object-fit:cover;object-position:52% 45%;display:block;border-radius:inherit;pointer-events:none;filter:saturate(.85) sepia(.12)}
.orb-cap{position:absolute;top:calc(100% + 8px);left:0;width:max(100%,112px);text-align:left;font-size:.75rem;line-height:1.45;color:var(--muted);pointer-events:none;transition:color .2s}
.orb-tile:hover,.orb-tile.is-active{box-shadow:0 0 0 1.5px var(--blue),0 12px 30px -12px #2a1f1640;z-index:2}
.orb-tile:hover .orb-art,.orb-tile.is-active .orb-art{opacity:.95;color:var(--blue)}
.orb-tile:hover .orb-cap,.orb-tile.is-active .orb-cap{color:var(--fg)}
.orb-tile:focus-visible{outline:2px solid var(--blue);outline-offset:4px;z-index:2}

.orb-center{position:relative;z-index:3;height:100%;display:grid;place-items:center;pointer-events:none;padding-inline:24px}
.orb-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:720px}
.orb-head>*{pointer-events:auto}
.orb-head h1{font-size:clamp(2.3rem,5.2vw,4.25rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.orb-head>p:not(.orb-hint){max-width:34em;color:var(--muted);font-size:1.0625rem;line-height:1.8}
.orb-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.orb-ctas .button{padding:11px 20px;font-size:.9375rem}
.orb-hint{font-size:.8125rem;color:var(--muted);pointer-events:none!important;opacity:.85}

.orb-card{position:absolute;left:0;top:0;z-index:5;width:256px;padding:16px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 50px -20px #2a1f1650;opacity:0;cursor:auto;user-select:text;-webkit-user-select:text;transition:opacity .16s ease}
.orb-card.is-open{opacity:1}
.orb-card-kicker{font-size:.75rem;color:var(--blue-text);font-weight:600}
.orb-card h3{font-family:var(--serif);font-size:1.1875rem;font-weight:500;line-height:1.35;margin:4px 0 8px}
.orb-card-body{font-size:.875rem;line-height:1.7;color:var(--muted)}
.orb-card-cmd{display:block;margin-top:10px;padding:7px 10px;border-radius:8px;background:var(--surface);font:12px/1.6 var(--mono);color:var(--fg);white-space:pre-wrap;word-break:break-all}
.orb-card-cmd[hidden]{display:none}
.orb-card-foot{display:flex;align-items:center;gap:10px;margin-top:14px}
.orb-card-cta{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-size:.8125rem;font-weight:500}
.orb-card-cta:hover{border-color:var(--blue);color:var(--blue-text)}
.orb-card-foot span{font-size:.6875rem;color:var(--muted)}
.orb-card-foot span a{text-decoration:underline;text-underline-offset:2px}
.orb-card-close{margin-left:auto;width:28px;height:28px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:1.25rem;line-height:1}
.orb-card-close:hover{background:var(--surface);color:var(--fg)}

.hp-demo{padding-top:24px}

@media(max-width:760px){
  .orb{height:clamp(600px,calc(100svh - 120px),760px)}
  .orb-head{gap:16px}
  .orb-head>p:not(.orb-hint){font-size:.9375rem;background:color-mix(in srgb,var(--bg) 82%,transparent);border-radius:12px}
  .orb-cap{font-size:.6875rem;width:max(100%,84px)}
  .orb-card{width:min(300px,calc(100% - 24px))}
}
@media(prefers-reduced-motion:reduce){.orb-card,.orb-tile,.orb-art{transition:none}}