/* StoryOS 使用教程 V2.0（规则书 V2.23 · 方案 A）——全部挂在 #storyos-tut 下 */
html body #saas-fullscreen-app-wrapper[data-storyos-page="tutorial"] { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; background: #E9E9EB !important; z-index: 2147483645 !important; }
html.dark-mode body #saas-fullscreen-app-wrapper[data-storyos-page="tutorial"] { background: #09090B !important; }
#saas-fullscreen-app-wrapper[data-storyos-page="tutorial"] #saas-global-sidebar, #saas-fullscreen-app-wrapper[data-storyos-page="tutorial"] #saas-sidebar-overlay, #saas-fullscreen-app-wrapper[data-storyos-page="tutorial"] .saas-sidebar-container { display: none !important; }
#storyos-tut { --u-t1: #18181B; --u-t2: #3F3F46; --u-t3: #71717A; --u-t4: #A1A1AA; --u-t5: #52525B; --u-head: #27272A; --u-line: #E4E4E7; --u-row: #F4F4F5; --u-soft: #FAFAFA; --u-paper: #FFFFFF; --u-field: #D4D4D8; --u-sel: #52525B; --u-on-sel: #FFFFFF; --u-ink: #18181B; --u-title: #000000; --u-brand: #4A55C7; --u-brand-h: #3A44A8;
  --u-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; --u-serif: "Songti SC", "STSong", "SimSun", serif; --u-mono: "DM Mono", ui-monospace, Menlo, monospace;
  position: relative; width: 1024px; max-width: 100%; height: 100vh; margin: 0 auto; display: flex; flex-direction: column; font-family: var(--u-sans); color: var(--u-t1); -webkit-font-smoothing: antialiased; }
html.dark-mode #storyos-tut { --u-t1: #FAFAFA; --u-t2: #D4D4D8; --u-t3: #A1A1AA; --u-t4: #71717A; --u-t5: #A1A1AA; --u-head: #E4E4E7; --u-line: #3F3F46; --u-row: #27272A; --u-soft: #1F1F23; --u-paper: #18181B; --u-field: #52525B; --u-sel: #D4D4D8; --u-on-sel: #18181B; --u-ink: #FAFAFA; --u-title: #FAFAFA; --u-brand: #8E96F0; --u-brand-h: #A5ACF4; }
#storyos-tut *, #storyos-tut *::before, #storyos-tut *::after { box-sizing: border-box; }
#storyos-tut a { text-decoration: none; }
#storyos-tut > .sos-banner { flex-shrink: 0; }
#storyos-tut .tut-paper { flex: 1; min-height: 0; padding: 20px 48px 0; background: var(--u-paper); display: flex; flex-direction: column; box-shadow: 0 0 0 1px #F4F4F5, 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
/* ---------- 分栏：贴满纸面左右、撑满屏幕高度，左右各自滚动 ---------- */
#storyos-tut .tut-split { flex: 1; min-height: 480px; margin: 20px -48px 0; border-top: 1px solid var(--u-line); display: flex; }
#storyos-tut .tut-side { width: 236px; flex-shrink: 0; border-right: 1px solid var(--u-line); overflow-y: auto; padding: 8px 12px 64px; display: flex; flex-direction: column; gap: 12px; }
#storyos-tut .tut-search { height: 36px; flex-shrink: 0; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--u-field); border-radius: 4px; background: var(--u-paper); color: var(--u-t4); cursor: text; }
#storyos-tut .tut-search:focus-within { border-color: var(--u-t3); }
#storyos-tut .tut-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent; font: 14px/20px var(--u-sans); color: var(--u-t1); -webkit-appearance: none; appearance: none; }
#storyos-tut .tut-search input::placeholder { color: var(--u-t4); }
#storyos-tut .tut-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
#storyos-tut .tut-nav { display: flex; flex-direction: column; gap: 2px; }
#storyos-tut .tut-row { height: 36px; padding: 0 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--u-t1); }
#storyos-tut .tut-row:hover { background: var(--u-row); }
#storyos-tut .tut-row-ic { display: inline-flex; color: var(--u-t3); }
#storyos-tut .tut-row-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyos-tut .tut-row-n { font-size: 12px; color: var(--u-t4); font-variant-numeric: tabular-nums; }
#storyos-tut .tut-row.is-on { background: var(--u-sel); color: var(--u-on-sel); font-weight: 600; }
#storyos-tut .tut-row.is-on .tut-row-ic, #storyos-tut .tut-row.is-on .tut-row-n { color: var(--u-on-sel); }
#storyos-tut .tut-side-sep { height: 1px; margin: 8px 0; background: var(--u-row); }
#storyos-tut .tut-side-label { padding: 0 10px 4px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--u-t3); }
/* 本页目录（左栏版，屏幕 < 1344px 时用） */
#storyos-tut .tut-side-toc { margin: 4px 0 8px 18px; display: flex; flex-direction: column; border-left: 2px solid var(--u-line); }
#storyos-tut .tut-tocl a { display: block; margin-left: -2px; padding-left: 10px; border-left: 2px solid transparent; font-size: 12px; line-height: 24px; color: var(--u-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyos-tut .tut-tocl a:hover { color: var(--u-t1); }
#storyos-tut .tut-tocl a.is-on { color: var(--u-ink); font-weight: 600; border-left-color: var(--u-ink); }
/* ---------- 右边 ---------- */
#storyos-tut .tut-main { flex: 1; min-width: 0; overflow-y: auto; background: var(--u-soft); padding: 8px 24px 64px; }
#storyos-tut.is-read .tut-main { background: var(--u-paper); padding: 24px 48px 64px; }
#storyos-tut .tut-main.is-searching { background: var(--u-soft); padding: 8px 24px 64px; }
#storyos-tut .tut-head { height: 36px; display: flex; align-items: center; gap: 12px; min-width: 0; }
#storyos-tut .tut-head h1 { margin: 0; font-family: var(--u-serif); font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--u-t1); white-space: nowrap; }
#storyos-tut .tut-head span { font-size: 12px; line-height: 16px; color: var(--u-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyos-tut .tut-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
#storyos-tut .tut-card { display: block; padding: 20px 24px; background: var(--u-paper); border: 1px solid var(--u-line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05); color: var(--u-t1); transition: border-color .1s; }
#storyos-tut .tut-card:hover { border-color: var(--u-t4); }
#storyos-tut .tut-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#storyos-tut .tut-card-tt { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#storyos-tut .tut-num { width: 20px; flex-shrink: 0; font-family: var(--u-mono); font-size: 12px; line-height: 16px; color: var(--u-t4); font-variant-numeric: tabular-nums; }
#storyos-tut .tut-card-tt b { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .35px; color: var(--u-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyos-tut .tut-go { flex-shrink: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--u-brand); }
#storyos-tut .tut-card:hover .tut-go { color: var(--u-brand-h); }
#storyos-tut .tut-card-p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 8px 0 0 30px; font-family: var(--u-serif); font-size: 16px; line-height: 24px; color: var(--u-t2); }
#storyos-tut .tut-empty { margin-top: 12px; padding: 20px 16px; border: 1px dashed rgba(161,161,170,.5); border-radius: 8px; background: rgba(228,228,231,.25); text-align: center; display: flex; flex-direction: column; gap: 4px; }
#storyos-tut .tut-empty b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--u-t1); }
#storyos-tut .tut-empty span { font-family: var(--u-serif); font-size: 15px; line-height: 24px; color: var(--u-t3); }
/* ---------- 文章 ---------- */
#storyos-tut .tut-crumb { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--u-t3); }
#storyos-tut .tut-crumb a { color: var(--u-t3); }
#storyos-tut .tut-crumb a:hover { color: var(--u-t1); }
#storyos-tut .tut-title { margin: 12px 0 0; font-family: var(--u-serif); font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: -.02em; color: var(--u-title); }
#storyos-tut .tut-meta { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--u-t3); font-variant-numeric: tabular-nums; }
#storyos-tut .tut-rule { height: 1px; margin: 20px 0; background: var(--u-line); max-width: 600px; }
#storyos-tut .tut-toc-inline { display: none; }
#storyos-tut .tut-body { max-width: 600px; font-family: var(--u-serif); font-size: 16px; line-height: 28px; color: var(--u-head); word-wrap: break-word; }
#storyos-tut .tut-body > :first-child { margin-top: 0 !important; }
#storyos-tut .tut-body p, #storyos-tut .tut-body ul, #storyos-tut .tut-body ol, #storyos-tut .tut-body figure, #storyos-tut .tut-body table, #storyos-tut .tut-body pre { margin: 0 0 16px; }
#storyos-tut .tut-body p { color: var(--u-head); font-size: 16px; line-height: 28px; }
#storyos-tut .tut-body h2 { margin: 28px 0 12px; padding: 0; border: 0; font-family: var(--u-serif); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--u-t1); scroll-margin-top: 24px; }
#storyos-tut .tut-body h3 { margin: 20px 0 8px; font-family: var(--u-serif); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--u-t1); }
#storyos-tut .tut-body h4, #storyos-tut .tut-body h5, #storyos-tut .tut-body h6 { margin: 16px 0 8px; font-family: var(--u-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .35px; color: var(--u-t1); }
#storyos-tut .tut-body ul, #storyos-tut .tut-body ol { padding-left: 22px; color: var(--u-head); }
#storyos-tut .tut-body li { margin: 0 0 4px; }
#storyos-tut .tut-body li::marker { color: var(--u-t4); }
#storyos-tut .tut-body strong, #storyos-tut .tut-body b { font-weight: 600; color: var(--u-t1); }
#storyos-tut .tut-body a { color: var(--u-brand); font-weight: 600; }
#storyos-tut .tut-body a:hover { color: var(--u-brand-h); text-decoration: underline; }
#storyos-tut .tut-body img { display: block; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--u-line); border-radius: 8px; }
#storyos-tut .tut-body figure { max-width: 100%; }
#storyos-tut .tut-body figcaption { margin-top: 8px; font-family: var(--u-sans); font-size: 12px; line-height: 16px; color: var(--u-t3); text-align: left; }
#storyos-tut .tut-body blockquote, #storyos-tut .tut-body .wp-block-quote { margin: 0 0 16px; padding: 12px 16px; border: 0; border-radius: 6px; background: var(--u-row); font-family: var(--u-serif); font-size: 14px; line-height: 24px; font-style: normal; color: var(--u-t2); }
#storyos-tut .tut-body blockquote p { margin: 0 0 4px; font-size: 14px; line-height: 24px; color: var(--u-t2); }
#storyos-tut .tut-body blockquote p:last-child { margin-bottom: 0; }
#storyos-tut .tut-body blockquote strong:first-child { display: block; font-family: var(--u-sans); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--u-t2); margin-bottom: 4px; }
#storyos-tut .tut-body blockquote cite { display: block; margin-top: 4px; font-family: var(--u-sans); font-size: 12px; font-style: normal; color: var(--u-t3); }
#storyos-tut .tut-body code { padding: 1px 4px; border-radius: 4px; background: var(--u-row); font-family: var(--u-mono); font-size: 13px; }
#storyos-tut .tut-body pre { padding: 12px 16px; border-radius: 6px; background: var(--u-row); overflow-x: auto; font-size: 13px; line-height: 20px; }
#storyos-tut .tut-body pre code { padding: 0; background: transparent; }
#storyos-tut .tut-body hr { height: 1px; margin: 24px 0; border: 0; background: var(--u-line); }
#storyos-tut .tut-body table { width: 100%; border-collapse: collapse; font-family: var(--u-sans); font-size: 14px; line-height: 20px; }
#storyos-tut .tut-body th, #storyos-tut .tut-body td { padding: 8px 12px; border: 1px solid var(--u-line); text-align: left; vertical-align: top; }
#storyos-tut .tut-body th { background: var(--u-soft); font-weight: 600; }
#storyos-tut .tut-pn { max-width: 600px; margin-top: 32px; display: flex; gap: 12px; }
#storyos-tut .tut-pn > * { flex: 1; min-width: 0; }
#storyos-tut .tut-pn a { padding: 12px 16px; border: 1px solid var(--u-line); border-radius: 8px; background: var(--u-paper); display: flex; flex-direction: column; gap: 2px; transition: border-color .1s; }
#storyos-tut .tut-pn a:hover { border-color: var(--u-t4); }
#storyos-tut .tut-pn span { font-size: 12px; line-height: 16px; color: var(--u-t3); }
#storyos-tut .tut-pn b { font-family: var(--u-serif); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--u-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyos-tut .tut-pn .tut-pn-next { text-align: right; }
/* 本页目录：纸面外浮动面板（≥ 1344px） */
#storyos-tut .tut-toc { display: none; position: absolute; top: 126px; left: calc(100% + 16px); width: 136px; padding: 12px; background: var(--u-paper); border: 1px solid var(--u-line); border-radius: 8px; box-shadow: 0 0 0 1px var(--u-line), 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); flex-direction: column; }
#storyos-tut .tut-toc b, #storyos-tut .tut-toc-inline b { display: block; margin-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--u-t1); }
#storyos-tut .tut-toc a { border-left-color: var(--u-line); margin-left: 0; }
#storyos-tut .tut-toc a.is-on { border-left-color: var(--u-ink); }
@media (min-width: 1344px) {
  #storyos-tut .tut-toc { display: flex; }
  #storyos-tut .tut-side-toc { display: none; }
}
html.sos-leaving #storyos-tut .tut-toc { opacity: 0 !important; transition: opacity .12s ease-out !important; pointer-events: none !important; }
/* ---------- 断点 ---------- */
@media (max-width: 1100px) {
  #storyos-tut .tut-paper { padding: 20px 32px 0; }
  #storyos-tut .tut-split { margin: 20px -32px 0; }
}
@media (max-width: 860px) {
  #storyos-tut.is-read .tut-main { padding: 24px 32px 64px; }
}
@media (max-width: 720px) {
  #storyos-tut { height: 100vh; overflow-y: auto; }
  #storyos-tut .tut-paper { flex: none; min-height: calc(100vh - 44px); padding: 20px 16px 0; box-shadow: none; }
  #storyos-tut .tut-split { flex: none; min-height: 0; margin: 20px -16px 0; flex-direction: column; }
  #storyos-tut .tut-side { width: auto; overflow: visible; padding: 8px 16px 12px; border-right: 0; border-bottom: 1px solid var(--u-line); gap: 8px; }
  #storyos-tut .tut-nav { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  #storyos-tut .tut-nav::-webkit-scrollbar { display: none; }
  #storyos-tut .tut-row { flex-shrink: 0; height: 30px; padding: 0 12px; border: 1px solid var(--u-line); border-radius: 9999px; font-size: 12px; font-weight: 500; }
  #storyos-tut .tut-row.is-on { border-color: var(--u-sel); }
  #storyos-tut .tut-row-ic, #storyos-tut .tut-side-sep, #storyos-tut .tut-side-label, #storyos-tut .tut-side-toc { display: none; }
  #storyos-tut .tut-main, #storyos-tut .tut-main.is-searching { overflow: visible; padding: 12px 16px 64px; }
  #storyos-tut.is-read .tut-main { padding: 20px 16px 64px; }
  #storyos-tut .tut-card { padding: 16px; }
  #storyos-tut .tut-card-p { margin-left: 0; }
  #storyos-tut .tut-head span { display: none; }
  #storyos-tut .tut-toc-inline { display: block; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--u-line); border-radius: 8px; background: var(--u-soft); }
  #storyos-tut .tut-toc-inline a { margin-left: 0; border-left-color: var(--u-line); }
  #storyos-tut .tut-toc-inline a.is-on { border-left-color: var(--u-ink); }
}