/* 自动抽取：旧 styles.css 中工坊档案夹动效规则（源顺序保留）。主题适配见 workshop-theme 段落。 */
.tutorial-collection-heading{align-items: flex-end;}
.tutorial-collection-bar{display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 12px;
  padding: 10px 13px;
  border: 1px solid rgba(143,232,255,.16);
  border-radius: 8px;
  background: rgba(6,19,37,.56);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .05em;}
.tutorial-collection-bar > span{display: inline-flex; align-items: center; gap: 9px;}
.tutorial-collection-bar b{color: var(--paper); font-size: 10px; font-weight: 600;}
.tutorial-collection-bar small{color: var(--muted-2); font-size: 8px;}
.tutorial-collection-bar i{display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(184,232,117,.65);}
.tutorial-collection-grid{display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;}
@media (max-width: 980px){
  .tutorial-collection-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 620px){
  .tutorial-collection-heading{align-items: flex-start;}
  .tutorial-collection-bar{align-items: flex-start; flex-direction: column; gap: 8px; line-height: 1.45;}
  .tutorial-collection-grid{grid-template-columns: 1fr; gap: 12px;}
}
.tutorial-folder-stage{position: relative;
  margin-top: 14px;
  isolation: isolate;}
.tutorial-folder-stage-head{display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 10px;
  color: var(--muted-2);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;}
.tutorial-folder-stage-label{color: var(--cyan);
  font-weight: 700;}
.tutorial-folder-stage-hint b{color: var(--paper);
  font-weight: 600;}
.tutorial-folder-deck{position: relative;
  min-height: 430px;
  overflow: visible;
  perspective: 1300px;}
.tutorial-folder{--folder-offset-x: 0px;
  --folder-offset-y: 34px;
  --folder-rotate: 0deg;
  --drag-x: 0px;
  --drag-y: 0px;
  --launch-x: 0px;
  --launch-y: 0px;
  position: absolute;
  top: 20px;
  left: 50%;
  display: flex;
  width: min(360px, 30vw);
  min-height: 360px;
  overflow: visible;
  border-color: rgba(143,232,255,.28);
  transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x)), calc(var(--folder-offset-y) + var(--drag-y)), 0) rotate(var(--folder-rotate)) scale(1);
  transform-origin: 50% 86%;
  transition: transform .34s cubic-bezier(.2,.82,.24,1), border-color .24s ease, box-shadow .34s ease, opacity .24s ease;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;}
.tutorial-folder::before{content: "";
  position: absolute;
  z-index: -1;
  top: -9px;
  left: 16px;
  width: 112px;
  height: 20px;
  border: 1px solid rgba(143,232,255,.28);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, rgba(18,54,82,.94), rgba(10,30,54,.92));
  transform: skewX(-18deg);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  pointer-events: none;}
.tutorial-folder::after{content: "";
  position: absolute;
  z-index: -2;
  inset: 12px -10px -12px;
  border-radius: 17px;
  background: rgba(0,0,0,.28);
  filter: blur(14px);
  opacity: .68;
  pointer-events: none;}
.tutorial-folder:nth-child(1){--folder-offset-x: -235px; --folder-offset-y: 48px; --folder-rotate: -7deg; z-index: 1;}
.tutorial-folder:nth-child(2){--folder-offset-x: 0px; --folder-offset-y: 18px; --folder-rotate: 0deg; z-index: 3;}
.tutorial-folder:nth-child(3){--folder-offset-x: 235px; --folder-offset-y: 48px; --folder-rotate: 7deg; z-index: 2;}
.tutorial-folder:hover,
.tutorial-folder:focus-visible,
.tutorial-folder.is-active{border-color: rgba(143,232,255,.72);
  box-shadow: 0 26px 42px rgba(0,0,0,.3), 0 0 0 1px rgba(143,232,255,.12), inset 0 1px rgba(255,255,255,.1);
  transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x)), calc(var(--folder-offset-y) - 18px + var(--drag-y)), 0) rotate(calc(var(--folder-rotate) * .42)) scale(1.045);
  outline: none;}
.tutorial-folder:focus-visible{box-shadow: 0 26px 42px rgba(0,0,0,.3), 0 0 0 3px rgba(143,232,255,.2), inset 0 1px rgba(255,255,255,.1);}
.tutorial-folder.is-grabbed{cursor: grabbing; transition: none;}
.tutorial-folder.is-dragging{transition: none; z-index: 12;}
.tutorial-folder.is-launching{opacity: 0;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.16,.75,.24,1), opacity .2s ease;
  transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x) + var(--launch-x)), calc(var(--folder-offset-y) + var(--drag-y) + var(--launch-y)), 0) rotate(calc(var(--folder-rotate) * 1.8)) scale(.88);}
.tutorial-folder-tab{position: absolute;
  z-index: 6;
  top: 12px;
  left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 30px);
  padding: 5px 8px;
  border: 1px solid rgba(143,232,255,.28);
  border-radius: 6px;
  color: var(--paper);
  background: rgba(4,15,30,.78);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  font-size: 9px;
  letter-spacing: .08em;
  pointer-events: none;
  backdrop-filter: blur(6px);}
.tutorial-folder-tab b{color: var(--mint); font: 600 11px/1 Consolas, monospace;}
.tutorial-folder-tab span{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.tutorial-folder .tutorial-cover,
.tutorial-folder .tutorial-card-body{position: relative; z-index: 2;}
.tutorial-folder .tutorial-cover{border-radius: 13px 13px 0 0;}
.tutorial-folder .tutorial-cover-index{opacity: .22;}
.tutorial-folder .tutorial-card-body{min-height: 150px; border-radius: 0 0 13px 13px; background: linear-gradient(180deg, rgba(7,20,39,.94), rgba(5,16,32,.96));}
.tutorial-folder:not(.is-active):not(:hover) .tutorial-card-body{opacity: .84;}
.tutorial-folder .tutorial-card-body h3{font-size: 16px;}
.tutorial-folder .tutorial-card-body p{font-size: 10px;}
.tutorial-folder .tutorial-cover img{transition: transform .52s cubic-bezier(.2,.82,.24,1), opacity .3s ease;}
.tutorial-folder:hover .tutorial-cover img,
.tutorial-folder:focus-visible .tutorial-cover img,
.tutorial-folder.is-active .tutorial-cover img{transform: scale(1.08); opacity: 1;}
@media (max-width: 1120px) and (min-width: 621px){
  .tutorial-folder{width: min(320px, 34vw);}
  .tutorial-folder:nth-child(1){--folder-offset-x: -190px;}
  .tutorial-folder:nth-child(3){--folder-offset-x: 190px;}
}
@media (max-width: 620px){
  .tutorial-folder-stage-head{align-items: flex-start; flex-direction: column; gap: 5px; margin-bottom: 8px; font-size: 8px;}
  .tutorial-folder-deck{display: flex;
    min-height: 0;
    gap: 14px;
    margin-inline: -2px;
    padding: 22px 7vw 30px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    perspective: none;}
  .tutorial-folder-deck::-webkit-scrollbar{display: none;}
  .tutorial-folder{position: relative;
    inset: auto;
    flex: 0 0 min(82vw, 340px);
    width: auto;
    min-height: 0;
    transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(0deg) scale(1);
    scroll-snap-align: center;}
  .tutorial-folder:nth-child(1),
  .tutorial-folder:nth-child(2),
  .tutorial-folder:nth-child(3){--folder-offset-x: 0px; --folder-offset-y: 0px; --folder-rotate: 0deg;}
  .tutorial-folder:hover,
  .tutorial-folder:focus-visible,
  .tutorial-folder.is-active{transform: translate3d(var(--drag-x), calc(-10px + var(--drag-y)), 0) rotate(0deg) scale(1.02);}
  .tutorial-folder.is-launching{transform: translate3d(calc(var(--drag-x) + var(--launch-x)), calc(var(--drag-y) + var(--launch-y)), 0) rotate(5deg) scale(.88);}
  .tutorial-folder .tutorial-card-body{min-height: 155px;}
}
.tutorial-folder[data-reveal].is-visible{opacity: 1;
  transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x)), calc(var(--folder-offset-y) + var(--drag-y)), 0) rotate(var(--folder-rotate)) scale(1);}
.tutorial-folder[data-reveal].is-visible:hover,
.tutorial-folder[data-reveal].is-visible:focus-visible,
.tutorial-folder[data-reveal].is-visible.is-active{transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x)), calc(var(--folder-offset-y) - 18px + var(--drag-y)), 0) rotate(calc(var(--folder-rotate) * .42)) scale(1.045);}
@media (max-width: 620px){
  .tutorial-folder[data-reveal].is-visible{transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(0deg) scale(1);}
  .tutorial-folder[data-reveal].is-visible:hover,
  .tutorial-folder[data-reveal].is-visible:focus-visible,
  .tutorial-folder[data-reveal].is-visible.is-active{transform: translate3d(var(--drag-x), calc(-10px + var(--drag-y)), 0) rotate(0deg) scale(1.02);}
  .tutorial-folder[data-reveal].is-visible.is-launching{transform: translate3d(calc(var(--drag-x) + var(--launch-x)), calc(var(--drag-y) + var(--launch-y)), 0) rotate(5deg) scale(.88);}
}
@media (prefers-reduced-motion: reduce){
  .tutorial-folder{transition-duration: .01ms;}
  .tutorial-folder.is-launching{transition-duration: .01ms;}
}
.tutorial-folder[data-reveal].is-visible:hover,
.tutorial-folder[data-reveal].is-visible:focus-visible,
.tutorial-folder[data-reveal].is-visible.is-active{z-index: 10;}
.tutorial-folder[data-reveal].is-visible.is-launching{z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x) + var(--launch-x)), calc(var(--folder-offset-y) + var(--drag-y) + var(--launch-y)), 0) rotate(calc(var(--folder-rotate) * 1.8)) scale(.88);}
@media (max-width: 620px){
  .tutorial-folder[data-reveal].is-visible.is-launching{transform: translate3d(calc(var(--drag-x) + var(--launch-x)), calc(var(--drag-y) + var(--launch-y)), 0) rotate(5deg) scale(.88);}
}
.tutorial-folder[data-reveal]{opacity: 1;
  transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x)), calc(var(--folder-offset-y) + var(--drag-y)), 0) rotate(var(--folder-rotate)) scale(1);}
@media (max-width: 620px){
  .tutorial-folder[data-reveal]{flex-basis: min(78vw, 340px);
    transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(0deg) scale(1);}
}
@media (min-width: 621px){
  .tutorial-folder[data-reveal].is-visible:hover,
  .tutorial-folder[data-reveal].is-visible:focus-visible,
  .tutorial-folder[data-reveal].is-visible.is-active{transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x)), calc(var(--folder-offset-y) - 26px + var(--drag-y)), 60px) rotate(calc(var(--folder-rotate) * .28)) scale(1.06);}
}
.tutorial-folder-stage-status{display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: baseline;
  gap: 7px 12px;
  margin: 0 2px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(143,232,255,.18);
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(143,232,255,.07), rgba(184,232,117,.035));
  color: var(--muted);}
.tutorial-folder-stage-status > b{color: var(--mint);
  font: 700 12px/1 Consolas, monospace;
  letter-spacing: .08em;}
.tutorial-folder-stage-status > strong{min-width: 0;
  overflow: hidden;
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;}
.tutorial-folder-stage-status > span{min-width: 0;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;}
.tutorial-folder-callout{position: absolute;
  z-index: 18;
  top: -64px;
  left: 50%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  width: min(286px, calc(100vw - 52px));
  padding: 9px 11px 10px;
  border: 1px solid rgba(184,232,117,.42);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(7,24,42,.96), rgba(5,15,30,.96));
  box-shadow: 0 14px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(143,232,255,.08);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 13px, 0) scale(.94);
  transform-origin: 50% 100%;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2,.82,.24,1);}
.tutorial-folder-callout::after{content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(184,232,117,.42);
  border-bottom: 1px solid rgba(184,232,117,.42);
  background: rgba(6,19,34,.98);
  transform: translateX(-50%) rotate(45deg);}
.tutorial-folder-callout-index{grid-row: span 2;
  align-self: start;
  padding-top: 1px;
  color: var(--mint);
  font: 700 16px/1 Consolas, monospace;}
.tutorial-folder-callout-title{min-width: 0;
  overflow: hidden;
  color: var(--paper);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;}
.tutorial-folder-callout-course{color: var(--cyan);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .06em;}
.tutorial-folder-callout-summary{grid-column: 1 / -1;
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}
.tutorial-folder[data-reveal].is-visible.is-active .tutorial-folder-callout,
.tutorial-folder[data-reveal].is-visible.is-pressed .tutorial-folder-callout,
.tutorial-folder[data-reveal].is-visible.is-touch-selected .tutorial-folder-callout{opacity: 1;
  transform: translate3d(-50%, -2px, 0) scale(1);}
.tutorial-touch-guide{display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-height: 0;
  margin: 0 auto;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height .22s ease, opacity .2s ease, transform .22s ease, margin .22s ease;}
.tutorial-touch-guide.is-visible{max-height: 44px;
  margin: 2px auto 8px;
  opacity: 1;
  transform: translateY(0);}
.tutorial-touch-guide-dot{width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(184,232,117,.1), 0 0 14px rgba(184,232,117,.55);}
.tutorial-folder-deck.is-touch-open{scroll-snap-type: none;
  overscroll-behavior-x: contain;}
.tutorial-folder-stage[data-touch-mode="pressing"] .tutorial-folder.is-pressed{box-shadow: 0 20px 36px rgba(0,0,0,.3), 0 0 0 1px rgba(184,232,117,.2);}
.tutorial-folder-stage[data-touch-mode="open"] .tutorial-folder.is-touch-selected,
.tutorial-folder-stage[data-touch-mode="armed"] .tutorial-folder.is-touch-selected{box-shadow: 0 28px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(184,232,117,.28), 0 0 24px rgba(184,232,117,.12);}
.tutorial-folder.is-throw-ready{border-color: rgba(184,232,117,.86) !important;
  box-shadow: 0 30px 54px rgba(0,0,0,.38), 0 0 0 2px rgba(184,232,117,.2), 0 0 30px rgba(184,232,117,.18) !important;}
@media (min-width: 621px){
  .tutorial-folder[data-reveal].is-visible.is-active,
  .tutorial-folder[data-reveal].is-visible.is-pressed,
  .tutorial-folder[data-reveal].is-visible.is-touch-selected{z-index: 14;
    transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x)), calc(var(--folder-offset-y) - 30px + var(--drag-y)), 60px) rotate(calc(var(--folder-rotate) * .22)) scale(1.06) !important;}
}
@media (max-width: 620px){
  .tutorial-folder-stage-status{grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 9px;
    margin-bottom: 9px;
    padding: 9px 10px;}
  .tutorial-folder-stage-status > b{font-size: 11px;}
  .tutorial-folder-stage-status > strong{font-size: 11px;}
  .tutorial-folder-stage-status > span{grid-column: 1 / -1;
    font-size: 9px;
    white-space: normal;}
  .tutorial-folder-callout{top: -57px;
    width: min(264px, calc(100vw - 42px));
    padding: 8px 10px 9px;}
  .tutorial-folder-callout-index{font-size: 15px;}
  .tutorial-folder-callout-title{font-size: 11px;}
  .tutorial-folder-callout-summary{font-size: 8px;}
  .tutorial-folder-stage[data-touch-mode="open"] .tutorial-folder:not(.is-touch-selected),
  .tutorial-folder-stage[data-touch-mode="armed"] .tutorial-folder:not(.is-touch-selected){opacity: .58;
    filter: saturate(.72) brightness(.82);}
  .tutorial-folder-stage[data-touch-mode="open"] .tutorial-folder.is-touch-selected,
  .tutorial-folder-stage[data-touch-mode="armed"] .tutorial-folder.is-touch-selected{z-index: 30;
    touch-action: none;
    transform: translate3d(var(--drag-x), -19px, 0) rotate(0deg) scale(1.035) !important;}
  .tutorial-folder-stage[data-touch-mode="open"] .tutorial-folder.is-touch-selected .tutorial-folder-callout,
  .tutorial-folder-stage[data-touch-mode="armed"] .tutorial-folder.is-touch-selected .tutorial-folder-callout{transform: translate3d(-50%, -1px, 0) scale(1);}
  .tutorial-folder-deck.is-touch-open .tutorial-folder{scroll-snap-align: none;}
  .tutorial-touch-guide{font-size: 9px;}
}
.tutorial-folder[data-reveal].is-visible.is-launching{z-index: 40 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(calc(-50% + var(--folder-offset-x) + var(--drag-x) + var(--launch-x)), calc(var(--folder-offset-y) + var(--drag-y) + var(--launch-y)), 100px) rotate(calc(var(--folder-rotate) * 1.35)) scale(.9) !important;}
@media (max-width: 620px){
  .tutorial-folder[data-reveal].is-visible.is-launching{transform: translate3d(calc(var(--drag-x) + var(--launch-x)), calc(var(--drag-y) + var(--launch-y)), 100px) rotate(4deg) scale(.9) !important;}
}
@media (prefers-reduced-motion: reduce){
  .tutorial-folder-callout,
  .tutorial-touch-guide,
  .tutorial-folder{transition-duration: .01ms !important;}
}
@media (min-width: 621px) and (max-width: 980px){
  .tutorial-folder-callout{width: min(248px, calc(100vw - 42px));}
  .tutorial-folder:nth-child(1) .tutorial-folder-callout{left: 8px;
    transform: translate3d(0, 13px, 0) scale(.94);}
  .tutorial-folder:nth-child(3) .tutorial-folder-callout{left: auto;
    right: 8px;
    transform: translate3d(0, 13px, 0) scale(.94);}
  .tutorial-folder[data-reveal].is-visible.is-active .tutorial-folder-callout,
  .tutorial-folder[data-reveal].is-visible.is-pressed .tutorial-folder-callout,
  .tutorial-folder[data-reveal].is-visible.is-touch-selected .tutorial-folder-callout{transform: translate3d(0, -2px, 0) scale(1);}
}
@media (max-width: 620px){
  .tutorial-folder[data-reveal]{touch-action: none;}
}
.tutorial-folder-stage--momentum{position: relative;
  overflow: visible;
  isolation: isolate;}
.tutorial-folder-stage--momentum .tutorial-folder-stage-status{position: relative;
  z-index: 3;}
.tutorial-momentum-layout{display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 318px);
  align-items: center;
  gap: clamp(22px, 5vw, 68px);
  min-height: 382px;
  padding: 18px clamp(4px, 1.2vw, 14px) 5px;}
.tutorial-momentum-panel{position: relative;
  display: flex;
  min-height: 350px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid rgba(143,232,255,.19);
  border-radius: 16px;
  background-color: #071426;
  background: radial-gradient(circle at 52% 39%, rgba(57,112,152,.18), transparent 49%), linear-gradient(145deg, rgba(13,35,62,.96), rgba(4,14,30,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.16);
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .35s ease;}
.tutorial-momentum-panel::after{content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  border: 1px dashed rgba(143,232,255,.08);
  border-radius: 11px;
  pointer-events: none;}
.tutorial-momentum-panel.is-touch-pressing{transform: translateY(-3px); border-color: rgba(184,232,117,.48);}
.tutorial-momentum-panel.is-touch-open{transform: translateY(-7px); border-color: rgba(143,232,255,.52); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 28px 75px rgba(0,0,0,.25), 0 0 0 1px rgba(143,232,255,.1);}
.tutorial-momentum-panel.is-touch-launching{transform: translateY(-10px);}
.tutorial-momentum-fig-label{position: absolute;
  top: 15px;
  left: 18px;
  color: var(--muted-2);
  font: 700 9px/1.2 Consolas, ui-monospace, monospace;
  letter-spacing: .16em;}
.tutorial-momentum-svg{fill: none;
  display: block;
  width: min(342px, 52vw);
  height: auto;
  overflow: visible;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;}
.tutorial-momentum-svg g{pointer-events: none;}
.tutorial-momentum-svg path{vector-effect: non-scaling-stroke;}
.tutorial-momentum-floor{width: min(320px, 70%);
  height: 22px;
  margin-top: -18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(143,232,255,.14), transparent 68%);
  filter: blur(5px);
  pointer-events: none;}
.tutorial-momentum-readout{display: grid;
  width: min(90%, 480px);
  gap: 4px;
  margin: 4px 0 18px;
  padding: 0 4px;}
.tutorial-readout-kicker,
.tutorial-rail-kicker{color: var(--muted-2);
  font: 700 8px/1.2 Consolas, ui-monospace, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;}
.tutorial-momentum-readout strong{overflow: hidden;
  color: var(--paper);
  font-size: clamp(16px, 1.8vw, 23px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;}
.tutorial-momentum-readout span:last-child{overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;}
.tutorial-rail{align-self: center;
  display: grid;
  gap: 9px;
  min-width: 0;}
.tutorial-rail-kicker{margin: 0 0 1px;}
.tutorial-rail-item{display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 11px;
  border: 1px solid rgba(156,190,224,.18);
  border-radius: 10px;
  color: var(--paper);
  text-align: left;
  background: linear-gradient(145deg, rgba(14,38,69,.76), rgba(6,19,38,.84));
  cursor: pointer;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), border-color .24s ease, background .24s ease, box-shadow .38s ease;}
.tutorial-rail-item:hover,
.tutorial-rail-item:focus-visible,
.tutorial-rail-item.is-active{transform: translateX(-7px);
  border-color: rgba(184,232,117,.7);
  background: linear-gradient(145deg, rgba(27,61,76,.82), rgba(11,29,49,.94));
  box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(184,232,117,.1);
  outline: none;}
.tutorial-rail-index{display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(143,232,255,.25);
  border-radius: 8px;
  color: var(--mint);
  background: rgba(184,232,117,.06);
  font: 700 10px/1 Consolas, ui-monospace, monospace;}
.tutorial-rail-item b{display: block; font-size: 13px; font-weight: 500; letter-spacing: -.015em;}
.tutorial-rail-item small{display: block; margin-top: 3px; overflow: hidden; color: var(--muted-2); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;}
.tutorial-rail-arrow{justify-self: end; color: var(--cyan); font-size: 16px;}
.tutorial-rail-note{display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 9px 0 0;
  color: var(--muted-2);
  font: 9px/1.55 Consolas, ui-monospace, monospace;}
.tutorial-rail-note i{width: 6px; height: 6px; flex: 0 0 6px; margin-top: 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(184,232,117,.65);}
.tutorial-touch-guide{display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-height: 0;
  margin: 0 auto;
  overflow: hidden;
  color: var(--muted-2);
  font: 9px/1.35 Consolas, ui-monospace, monospace;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height .22s ease, opacity .2s ease, transform .22s ease, margin .22s ease;}
.tutorial-touch-guide.is-visible{max-height: 38px; margin: -1px auto 13px; opacity: 1; transform: translateY(0);}
.tutorial-touch-guide-dot{width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(184,232,117,.1), 0 0 12px rgba(184,232,117,.6);}
.tutorial-touch-guide-progress{position: absolute; width: min(80%, 270px); height: 2px; margin-top: 32px; border-radius: 2px; background: var(--mint); opacity: 0; transform: scaleX(0); transform-origin: left center;}
.tutorial-momentum-panel.is-touch-pressing .tutorial-touch-guide-progress{opacity: 1; animation: tutorial-hold-progress .22s linear forwards;}
.tutorial-momentum-panel.is-touch-open .tutorial-touch-guide,
.tutorial-momentum-panel.is-touch-launching .tutorial-touch-guide{color: var(--paper);}
.tutorial-touch-launch-layer{pointer-events: none; transform-box: fill-box; transform-origin: center; opacity: 0; filter: drop-shadow(0 10px 12px rgba(184,232,117,.18)); will-change: transform, opacity;}
.tutorial-touch-launch-layer.is-visible{opacity: var(--throw-opacity, .82); transform: translate3d(0, var(--throw-y, 0px), 0) rotate(var(--throw-rotate, 0deg)) scale(var(--throw-scale, 1));}
.tutorial-touch-launch-layer.is-launching{animation: tutorial-folder-throw .36s cubic-bezier(.16,.8,.22,1) forwards;}
.tutorial-folder-fallback{margin-top: 15px; border-top: 1px solid rgba(156,190,224,.1); color: var(--muted-2); font-size: 9px;}
.tutorial-folder-fallback summary{padding: 10px 2px; cursor: pointer; color: var(--cyan);}
.tutorial-folder-fallback-links{display: grid; gap: 7px; padding: 0 0 12px;}
.tutorial-folder-fallback-links a{display: flex; align-items: baseline; gap: 9px; color: var(--muted);}
.tutorial-folder-fallback-links a:hover{color: var(--paper);}
.tutorial-folder-fallback-links b{color: var(--mint); font: 700 10px/1 Consolas, monospace;}
@media (max-width: 980px) and (min-width: 621px){
  .tutorial-momentum-layout{grid-template-columns: minmax(0, 1fr) 260px; gap: 22px;}
  .tutorial-momentum-svg{width: min(310px, 42vw);}
  .tutorial-rail-item{padding: 10px 9px;}
  .tutorial-rail-item b{font-size: 12px;}
}
@media (max-width: 620px){
  .tutorial-folder-stage--momentum .tutorial-folder-stage-head{margin-bottom: 8px;}
  .tutorial-momentum-layout{grid-template-columns: 1fr; gap: 13px; min-height: 0; padding: 10px 0 0;}
  .tutorial-momentum-panel{min-height: 334px; border-radius: 14px;}
  .tutorial-momentum-svg{width: min(296px, 82vw); touch-action: none;}
  .tutorial-momentum-floor{width: 72%; margin-top: -16px;}
  .tutorial-momentum-readout{width: min(90%, 340px); margin-top: 1px; margin-bottom: 11px;}
  .tutorial-momentum-readout strong{font-size: 17px;}
  .tutorial-momentum-readout span:last-child{font-size: 9px;}
  .tutorial-rail{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; padding: 9px; border: 1px solid rgba(156,190,224,.12); border-radius: 11px; background: rgba(8,22,43,.5);}
  .tutorial-rail-kicker{grid-column: 1 / -1; margin: 0 0 1px;}
  .tutorial-rail-item{grid-template-columns: 1fr; justify-items: center; gap: 4px; min-width: 0; padding: 9px 4px; text-align: center;}
  .tutorial-rail-item:hover, .tutorial-rail-item:focus-visible, .tutorial-rail-item.is-active{transform: translateY(-4px) scale(1.025);}
  .tutorial-rail-item small, .tutorial-rail-arrow{display: none;}
  .tutorial-rail-item b{overflow: hidden; width: 100%; font-size: 10px; text-overflow: ellipsis; white-space: nowrap;}
  .tutorial-rail-index{width: 27px; height: 27px; font-size: 9px;}
  .tutorial-rail-note{grid-column: 1 / -1; margin: 2px 0 0; font-size: 8px;}
  .tutorial-folder-fallback{margin-top: 10px;}
}
@media (prefers-reduced-motion: reduce){
  .tutorial-momentum-panel, .tutorial-rail-item, .tutorial-touch-guide{transition-duration: .01ms !important;}
  .tutorial-touch-launch-layer.is-launching{animation: none; opacity: 0;}
  .tutorial-touch-guide-progress{animation: none !important;}
}
.tutorial-folder-fallback-links a img{width: 42px; height: 28px; flex: 0 0 auto; object-fit: cover; border: 1px solid rgba(156,190,224,.18); border-radius: 4px; opacity: .82;}
.tutorial-rail-index{position: relative; overflow: hidden; isolation: isolate;}
.tutorial-rail-index img{position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; filter: saturate(.82) contrast(1.05);}
.tutorial-rail-index b{position: relative; z-index: 1; font: inherit;}
.tutorial-rail-item:hover .tutorial-rail-index img,
.tutorial-rail-item:focus-visible .tutorial-rail-index img,
.tutorial-rail-item.is-active .tutorial-rail-index img{opacity: .75;}
@media (max-width: 620px){
  .tutorial-folder-stage--momentum .tutorial-rail{max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.96);
    transition: max-height .28s ease, margin .28s ease, opacity .24s ease, transform .36s cubic-bezier(.2,.8,.2,1);}
  .tutorial-folder-stage--momentum.is-touch-open .tutorial-rail,
  .tutorial-folder-stage--momentum.is-touch-launching .tutorial-rail{max-height: 220px;
    margin-top: 8px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);}
}
.tutorial-folder-stage--momentum .tutorial-momentum-svg{touch-action: none;}
.tutorial-folder-stage--momentum.is-touch-open .tutorial-momentum-svg,
.tutorial-folder-stage--momentum.is-touch-launching .tutorial-momentum-svg{touch-action: none !important;}
.tutorial-folder-stage--momentum{position: relative; z-index: 46;}
.tutorial-folder-stage--momentum .tutorial-rail{position: relative; z-index: 50;}
.tutorial-folder-stage--momentum{z-index: 10;}
.tutorial-folder-stage--momentum .tutorial-rail{z-index: 20;}
.tutorial-folder-stage--momentum .tutorial-momentum-panel{border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;}
.tutorial-folder-stage--momentum .tutorial-momentum-panel::after{display: none;}
.tutorial-folder-stage--momentum .tutorial-momentum-panel.is-touch-pressing,
.tutorial-folder-stage--momentum .tutorial-momentum-panel.is-touch-open,
.tutorial-folder-stage--momentum .tutorial-momentum-panel.is-touch-launching{border-color: transparent;
  box-shadow: none;}
.tutorial-folder-stage--momentum .tutorial-folder-stage-head{margin-bottom: 2px;}
.tutorial-folder-stage--momentum .tutorial-momentum-readout{margin-top: 2px;}
.tutorial-collection-bar{margin: 12px 0 4px;
  padding: 0 2px;
  border: 0;
  background: transparent;}
.tutorial-collection-bar b{font-size: 10px;}
@media (max-width: 620px){
  .tutorial-folder-stage--momentum{padding-bottom: 30px;}
  .tutorial-folder-stage--momentum .tutorial-momentum-panel{min-height: 334px;
    border-radius: 0;}
}
@keyframes tutorial-hold-progress{ to { transform: scaleX(1); } }
@keyframes tutorial-folder-throw{ 0% { opacity: .92; transform: translate3d(0,var(--throw-y,0px),0) rotate(var(--throw-rotate,0deg)) scale(1.02); } 45% { opacity: 1; transform: translate3d(10px,-58px,0) rotate(-3deg) scale(1.045); } 100% { opacity: 0; transform: translate3d(54px,-210px,0) rotate(-9deg) scale(1.08); } }