.jn-tutorial-layer {
  --tutorial-surface:#141a25; --tutorial-sidebar:#111721; --tutorial-card:#1e2c39;
  --tutorial-ink:#eef4fc; --tutorial-muted:#91a0b5; --tutorial-line:#ffffff12; --tutorial-accent:#75dbe7;
  position:fixed; inset:0; z-index:150000; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; padding:24px; background:#030711bd; backdrop-filter:blur(10px);
  color:var(--tutorial-ink); font:14px/1.5 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
body:has(> .jn-tutorial-layer) { overflow:hidden; }
.jn-tutorial-layer *, .jn-tutorial-layer *::before, .jn-tutorial-layer *::after { box-sizing:border-box; }
.jn-tutorial-layer .jn-tutorial-panel {
  display:flex; flex-direction:column; width:min(1120px,100%); height:min(700px,calc(100dvh - 48px));
  min-width:0; min-height:0; overflow:hidden; margin:0; padding:0; background:var(--tutorial-surface);
  border:1px solid var(--tutorial-line); border-radius:20px; box-shadow:0 24px 100px #0008; text-align:left; outline:none;
}
.jn-tutorial-layer .jn-tutorial-head {
  display:flex; flex:none; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 24px; border-bottom:1px solid var(--tutorial-line);
}
.jn-tutorial-heading { display:flex; align-items:center; gap:13px; min-width:0; }
.jn-tutorial-brand-icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; color:var(--tutorial-accent); background:#75dbe70c; border:1px solid #75dbe724; }
.jn-tutorial-brand-icon svg { width:24px; height:24px; }
.jn-tutorial-layer .jn-tutorial-head h2 { margin:0; color:var(--tutorial-ink); font-size:21px; font-weight:650; line-height:1.35; letter-spacing:0; }
.jn-tutorial-layer .jn-tutorial-head p { margin:4px 0 0; color:var(--tutorial-muted); font-size:12px; line-height:1.5; }
.jn-tutorial-layer [data-tutorial-close] {
  display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:1px solid var(--tutorial-line);
  border-radius:10px; background:transparent; color:var(--tutorial-muted); cursor:pointer; box-shadow:none;
}
.jn-tutorial-layer [data-tutorial-close] svg { width:18px; height:18px; }
.jn-tutorial-layer [data-tutorial-close]:hover { color:var(--tutorial-ink); background:var(--tutorial-card); }
.jn-tutorial-body { display:grid; grid-template-columns:270px minmax(0,1fr); flex:1; min-width:0; min-height:0; overflow:hidden; }
.jn-tutorial-sidebar { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--tutorial-sidebar); border-right:1px solid var(--tutorial-line); }
.jn-tutorial-directory-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:24px 20px 16px; flex:none; }
.jn-tutorial-layer .jn-tutorial-directory-head h3 { margin:0; color:var(--tutorial-muted); font-size:13px; font-weight:500; line-height:24px; }
.jn-tutorial-directory-head>span { font-size:11px; color:var(--tutorial-muted); }
.jn-tutorial-list { display:flex; flex-direction:column; gap:6px; padding:0 10px 12px; min-height:0; overflow:auto; overscroll-behavior:contain; }
.jn-tutorial-layer .jn-tutorial-item {
  position:relative; display:flex; flex:none; align-items:center; gap:11px; width:100%; margin:0; padding:17px 12px;
  border:1px solid transparent; border-radius:10px; background:transparent; color:var(--tutorial-ink);
  text-align:left; cursor:pointer; font:inherit; line-height:1.5; letter-spacing:0; box-shadow:none;
}
.jn-tutorial-item:hover { background:#91a0b50a; }
.jn-tutorial-layer .jn-tutorial-item[aria-current] { background:var(--tutorial-card); border-color:#75dbe71f; }
.jn-tutorial-item[aria-current]::before { content:""; position:absolute; left:0; top:17px; bottom:17px; width:3px; border-radius:3px; background:var(--tutorial-accent); }
.jn-tutorial-number { flex:none; align-self:flex-start; padding-top:1px; color:var(--tutorial-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.jn-tutorial-item[aria-current] .jn-tutorial-number { color:var(--tutorial-accent); }
.jn-tutorial-copy { display:grid; gap:7px; min-width:0; flex:1; }
.jn-tutorial-copy strong { color:var(--tutorial-ink); font-size:14px; line-height:1.5; font-weight:550; overflow-wrap:anywhere; }
.jn-tutorial-item-meta { display:flex; justify-content:space-between; gap:8px; color:var(--tutorial-muted); font-size:11px; }
.jn-tutorial-item-meta small { font-size:inherit; }
.jn-tutorial-duration { font-variant-numeric:tabular-nums; }
.jn-tutorial-item-play { flex:none; width:16px; height:16px; color:var(--tutorial-accent); opacity:0; }
.jn-tutorial-item-play svg { width:100%; height:100%; }
.jn-tutorial-item[aria-current] .jn-tutorial-item-play { opacity:1; }
.jn-tutorial-content { display:flex; flex-direction:column; gap:18px; min-width:0; min-height:0; padding:24px; }
.jn-tutorial-details { flex:none; min-width:0; min-height:76px; }
.jn-tutorial-detail-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.jn-tutorial-layer .jn-tutorial-details h3 { margin:0; color:var(--tutorial-ink); font-size:20px; font-weight:600; line-height:1.4; }
.jn-tutorial-detail-heading>span { flex:none; color:var(--tutorial-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.jn-tutorial-layer .jn-tutorial-details p { max-width:64ch; margin:8px 0 0; color:var(--tutorial-muted); font-size:13px; line-height:1.7; }
.jn-tutorial-stage { position:relative; display:grid; place-items:center; flex:1; min-width:0; min-height:0; overflow:hidden; background:#03060c; border:1px solid var(--tutorial-line); border-radius:12px; }
.jn-tutorial-layer .jn-tutorial-video { display:block; position:absolute; inset:0; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; background:#03060c; }
.jn-tutorial-layer .jn-tutorial-ready { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; width:100%; height:100%; margin:0; padding:16px; border:0; border-radius:0; background:radial-gradient(ellipse at 50% 42%,#172a37 0%,#0b1220 62%); color:#edf4fc; font:inherit; box-shadow:none; cursor:pointer; }
.jn-tutorial-play-mark { display:grid; place-items:center; width:64px; height:64px; margin-bottom:4px; border:1px solid #75dbe75c; border-radius:50%; background:#75dbe70d; color:#86e2ec; }
.jn-tutorial-play-mark svg { width:25px; height:25px; margin-left:-3px; }
.jn-tutorial-ready strong { font-size:15px; font-weight:550; }
.jn-tutorial-ready>span:last-child { color:#91a0b5; font-size:12px; }
.jn-tutorial-layer .jn-tutorial-ready:hover .jn-tutorial-play-mark { background:#75dbe726; border-color:#75dbe7; }
.jn-tutorial-loading { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; pointer-events:none; background:#0b1220; color:#edf4fc; }
.jn-tutorial-loading.is-buffering { background:#0b1220d9; }
.jn-tutorial-loading[hidden], .jn-tutorial-error[hidden], .jn-tutorial-layer .jn-tutorial-ready[hidden] { display:none; }
.jn-tutorial-loader-mark { display:grid; place-items:center; width:76px; height:68px; margin-bottom:6px; border-radius:18px; border:1px solid #75dbe72b; background:#75dbe709; box-shadow:0 0 46px #75dbe708; }
.jn-tutorial-loading strong { font-size:14px; font-weight:500; }
.jn-tutorial-loading>span:last-child { color:#91a0b5; font-size:12px; }
/* Waveform adapted from LDRS (MIT), Griffin Johnston. Full license: platform-tutorials.LICENSE.txt. */
.jn-tutorial-wave { display:flex; align-items:center; justify-content:space-between; width:31px; height:28px; }
.jn-tutorial-wave i { width:4px; height:100%; border-radius:3px; background:#75dbe7; animation:jn-tutorial-wave 1.2s ease-in-out infinite; }
.jn-tutorial-wave i:nth-child(1) { animation-delay:-.54s; }
.jn-tutorial-wave i:nth-child(2) { animation-delay:-.36s; }
.jn-tutorial-wave i:nth-child(3) { animation-delay:-.18s; }
@keyframes jn-tutorial-wave { 0%,100% { transform:scaleY(.3); } 50% { transform:scaleY(1); } }
.jn-tutorial-layer .jn-tutorial-error { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid #f0ad4e40; border-radius:10px; background:#f0ad4e09; color:var(--tutorial-ink); font-size:12px; }
.jn-tutorial-layer .jn-tutorial-error[hidden] { display:none; }
.jn-tutorial-error p { margin:0; line-height:1.6; }
.jn-tutorial-error button { flex:none; padding:7px 12px; border:1px solid var(--tutorial-line); border-radius:7px; background:var(--tutorial-card); color:var(--tutorial-ink); cursor:pointer; font:inherit; }
.jn-tutorial-layer .jn-tutorial-empty { padding:20px; margin:0; color:var(--tutorial-muted); font-size:13px; line-height:1.7; }
.jn-tutorial-layer button:focus-visible { outline:2px solid var(--tutorial-accent); outline-offset:-2px; }
:is(html.jn-light-mode,html[data-theme="light"]) .jn-tutorial-layer { --tutorial-surface:#fff; --tutorial-sidebar:#f7f9fc; --tutorial-card:#eaf4f6; --tutorial-ink:#1a293d; --tutorial-muted:#63748a; --tutorial-line:#1a293d14; --tutorial-accent:#087f90; }
.public-home .home-nav .home-tutorial-trigger { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:0 12px; min-height:34px; border:1px solid #ffffff24; border-radius:999px; background:#ffffff08; color:#edf4ff; font-size:13px; font-family:inherit; cursor:pointer; }
@media(max-height:560px) and (min-width:761px) {
  .jn-tutorial-layer { padding:16px; }
  .jn-tutorial-layer .jn-tutorial-panel { height:calc(100dvh - 32px); }
  .jn-tutorial-layer .jn-tutorial-head { padding:12px 20px; }
  .jn-tutorial-body { grid-template-columns:240px minmax(0,1fr); }
  .jn-tutorial-content { padding:16px 20px; gap:12px; }
  .jn-tutorial-details { min-height:0; }
  .jn-tutorial-layer .jn-tutorial-details h3 { font-size:17px; }
  .jn-tutorial-layer .jn-tutorial-details p { margin-top:4px; font-size:12px; }
  .jn-tutorial-directory-head { padding:16px 20px 10px; }
  .jn-tutorial-layer .jn-tutorial-item { padding:12px; }
  .jn-tutorial-loader-mark { width:54px; height:48px; margin:0; border-radius:12px; }
  .jn-tutorial-loading { gap:6px; }
  .jn-tutorial-loading>span:last-child { display:none; }
  .jn-tutorial-play-mark { width:46px; height:46px; margin:0; }
  .jn-tutorial-layer .jn-tutorial-ready { gap:6px; }
}
@media(max-width:760px) {
  .jn-tutorial-layer { padding:12px; }
  .jn-tutorial-layer .jn-tutorial-panel { height:min(760px,calc(100dvh - 24px)); border-radius:16px; }
  .jn-tutorial-layer .jn-tutorial-head { padding:16px; gap:10px; }
  .jn-tutorial-layer .jn-tutorial-head h2 { font-size:19px; }
  .jn-tutorial-brand-icon { width:36px; height:36px; border-radius:10px; }
  .jn-tutorial-body { display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; }
  .jn-tutorial-sidebar { flex:none; border-right:0; border-bottom:1px solid var(--tutorial-line); }
  .jn-tutorial-directory-head { padding:14px 18px 8px; }
  .jn-tutorial-list { gap:2px; padding:0 8px 10px; overflow:visible; }
  .jn-tutorial-layer .jn-tutorial-item { padding:10px 12px; gap:12px; }
  .jn-tutorial-copy { gap:3px; }
  .jn-tutorial-item-meta { justify-content:flex-start; gap:12px; }
  .jn-tutorial-content { flex:none; gap:14px; padding:18px 16px; }
  .jn-tutorial-details { min-height:0; }
  .jn-tutorial-layer .jn-tutorial-details h3 { font-size:18px; }
  .jn-tutorial-layer .jn-tutorial-details p { font-size:12px; }
  .jn-tutorial-stage { flex:none; width:100%; aspect-ratio:16/9; min-height:160px; }
  .jn-tutorial-layer .jn-tutorial-error { align-items:flex-start; }
  .public-home .home-nav .home-tutorial-trigger { padding:0 8px; font-size:12px; }
}
@media(max-width:360px) {
  .public-home .home-brand span { max-width:22vw; }
  .public-home .home-nav { gap:4px; }
  .public-home .home-nav .home-tutorial-trigger { padding:0 6px; }
}
@media(prefers-reduced-motion:reduce) {
  .jn-tutorial-wave i { animation:none; transform:scaleY(.65); }
  .jn-tutorial-wave i:nth-child(2), .jn-tutorial-wave i:nth-child(3) { transform:scaleY(1); }
}