/* Auto-extracted site styles. HTML files contain structure only. */
/* ============================================================ machine/tutorials.html page scope: .kb-page-machine-tutorials ============================================================ */
html.kb-page-machine-tutorials {
--bg:#f5f5f7;--panel:#ffffff;--panel-2:#fbfbfd;--ink:#1d1d1f;--muted:#6e6e73;--muted-2:#8e8e93;--line:rgba(0,0,0,.09);--blue:#0071e3;--green:#5f8d68;--red:#b93a31;--amber:#ad7b17;--chip:rgba(0,0,0,.045);--hover:rgba(0,0,0,.055);--shadow:0 18px 48px rgba(0,0,0,.08);--sidebar:rgba(247,247,249,.86);
}
html.kb-page-machine-tutorials .dark-theme, html.kb-page-machine-tutorials.dark-theme {color-scheme:dark;--bg:#000;--panel:#1c1c1e;--panel-2:#161617;--ink:#f5f5f7;--muted:#a1a1a6;--muted-2:#8e8e93;--line:rgba(255,255,255,.14);--blue:#0a84ff;--green:#7fbf86;--red:#ff6961;--amber:#d9a441;--chip:rgba(255,255,255,.08);--hover:rgba(255,255,255,.09);--shadow:0 18px 48px rgba(0,0,0,.42);--sidebar:rgba(22,22,23,.92)}
html.kb-page-machine-tutorials * {box-sizing:border-box}html.kb-page-machine-tutorials,
body.kb-page-machine-tutorials {height:100%}body.kb-page-machine-tutorials {margin:0;font-family:-apple-system,"SF Pro Text","SF Pro Display","Helvetica Neue","BlinkMacSystemFont","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}html.kb-page-machine-tutorials a {color:inherit;text-decoration:none}html.kb-page-machine-tutorials button,
html.kb-page-machine-tutorials input,
html.kb-page-machine-tutorials textarea,
html.kb-page-machine-tutorials select {font:inherit}html.kb-page-machine-tutorials button {color:inherit}html.kb-page-machine-tutorials .app, html.kb-page-machine-tutorials.app {height:100dvh;display:grid;grid-template-columns:320px minmax(0,1fr);background:var(--bg)}
html.kb-page-machine-tutorials .sidebar, html.kb-page-machine-tutorials.sidebar {min-width:0;background:var(--sidebar);backdrop-filter:saturate(180%) blur(24px);border-right:1px solid var(--line);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}html.kb-page-machine-tutorials .side-head, html.kb-page-machine-tutorials.side-head {padding:16px 14px 10px;display:grid;gap:12px}html.kb-page-machine-tutorials .brand-row, html.kb-page-machine-tutorials.brand-row {display:flex;align-items:center;justify-content:space-between;gap:10px}html.kb-page-machine-tutorials .brand, html.kb-page-machine-tutorials.brand {display:flex;align-items:center;gap:9px;min-width:0;font-weight:650;letter-spacing:-.02em}html.kb-page-machine-tutorials .brand-mark, html.kb-page-machine-tutorials.brand-mark {width:21px;height:21px;border-radius:7px;background:linear-gradient(135deg,#8fb5ff 0 50%,#9bb688 50% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.30),0 6px 18px rgba(0,113,227,.18)}html.kb-page-machine-tutorials .brand span:last-child, html.kb-page-machine-tutorials.brand span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.kb-page-machine-tutorials .icon-button, html.kb-page-machine-tutorials.icon-button {width:34px;height:34px;border:1px solid var(--line);background:var(--chip);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .16s ease,transform .16s ease}html.kb-page-machine-tutorials .icon-button:hover, html.kb-page-machine-tutorials.icon-button:hover {background:var(--hover);transform:translateY(-1px)}html.kb-page-machine-tutorials .icon-button svg, html.kb-page-machine-tutorials.icon-button svg {width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}html.kb-page-machine-tutorials .theme-toggle .moon-icon, html.kb-page-machine-tutorials.theme-toggle .moon-icon {display:none}html.kb-page-machine-tutorials .dark-theme .theme-toggle .sun-icon, html.kb-page-machine-tutorials.dark-theme .theme-toggle .sun-icon {display:none}html.kb-page-machine-tutorials .dark-theme .theme-toggle .moon-icon, html.kb-page-machine-tutorials.dark-theme .theme-toggle .moon-icon {display:block}html.kb-page-machine-tutorials .new-post, html.kb-page-machine-tutorials.new-post {width:100%;height:42px;border:0;border-radius:16px;background:var(--ink);color:var(--panel);font-weight:620;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}html.kb-page-machine-tutorials .dark-theme .new-post, html.kb-page-machine-tutorials.dark-theme .new-post {background:#f5f5f7;color:#111}html.kb-page-machine-tutorials .new-post:disabled, html.kb-page-machine-tutorials.new-post:disabled {opacity:.48;cursor:not-allowed}html.kb-page-machine-tutorials .search-box, html.kb-page-machine-tutorials.search-box {position:relative}html.kb-page-machine-tutorials .search-box input, html.kb-page-machine-tutorials.search-box input {width:100%;height:40px;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--ink);padding:0 12px 0 36px;outline:none}html.kb-page-machine-tutorials .search-box svg, html.kb-page-machine-tutorials.search-box svg {position:absolute;left:12px;top:11px;width:17px;height:17px;stroke:var(--muted)}html.kb-page-machine-tutorials .side-filters, html.kb-page-machine-tutorials.side-filters {padding:8px 14px 12px;display:grid;gap:10px;border-bottom:1px solid var(--line)}html.kb-page-machine-tutorials .filter-label, html.kb-page-machine-tutorials.filter-label {font-size:12px;color:var(--muted);font-weight:650;margin-bottom:6px}html.kb-page-machine-tutorials .chip-row, html.kb-page-machine-tutorials.chip-row {display:flex;gap:7px;flex-wrap:wrap}html.kb-page-machine-tutorials .chip, html.kb-page-machine-tutorials.chip {border:0;border-radius:999px;background:var(--chip);color:var(--muted);padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer}html.kb-page-machine-tutorials .chip.active, html.kb-page-machine-tutorials.chip.active {background:rgba(0,113,227,.13);color:var(--blue)}html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list {overflow:auto;padding:10px}html.kb-page-machine-tutorials .post-item, html.kb-page-machine-tutorials.post-item {width:100%;text-align:left;border:0;background:transparent;border-radius:16px;padding:12px;cursor:pointer;display:grid;gap:7px;transition:background .14s ease}html.kb-page-machine-tutorials .post-item:hover, html.kb-page-machine-tutorials.post-item:hover {background:var(--hover)}html.kb-page-machine-tutorials .post-item.active, html.kb-page-machine-tutorials.post-item.active {background:var(--panel);box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 28px rgba(0,0,0,.06)}html.kb-page-machine-tutorials .dark-theme .post-item.active, html.kb-page-machine-tutorials.dark-theme .post-item.active {box-shadow:none}html.kb-page-machine-tutorials .post-title, html.kb-page-machine-tutorials.post-title {font-size:14px;line-height:1.28;font-weight:650;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.kb-page-machine-tutorials .post-excerpt, html.kb-page-machine-tutorials.post-excerpt {font-size:12px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}html.kb-page-machine-tutorials .post-meta, html.kb-page-machine-tutorials.post-meta {display:flex;gap:6px;align-items:center;color:var(--muted-2);font-size:11px;min-width:0}html.kb-page-machine-tutorials .dot, html.kb-page-machine-tutorials.dot {width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {padding:12px 14px 14px;border-top:1px solid var(--line);display:grid;gap:10px}html.kb-page-machine-tutorials .user-card, html.kb-page-machine-tutorials.user-card {display:flex;align-items:center;gap:10px;border:0;background:transparent;width:100%;padding:8px;border-radius:16px;text-align:left;cursor:pointer}html.kb-page-machine-tutorials .user-card:hover, html.kb-page-machine-tutorials.user-card:hover {background:var(--hover)}html.kb-page-machine-tutorials .avatar, html.kb-page-machine-tutorials.avatar {width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,rgba(0,113,227,.88),rgba(155,182,136,.88));display:flex;align-items:center;justify-content:center;color:white;font-size:13px;font-weight:750;flex:0 0 auto}html.kb-page-machine-tutorials .user-main, html.kb-page-machine-tutorials.user-main {min-width:0}html.kb-page-machine-tutorials .user-name, html.kb-page-machine-tutorials.user-name {font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.kb-page-machine-tutorials .user-sub, html.kb-page-machine-tutorials.user-sub {font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.kb-page-machine-tutorials .side-links, html.kb-page-machine-tutorials.side-links {display:flex;gap:8px;flex-wrap:wrap}html.kb-page-machine-tutorials .side-links a, html.kb-page-machine-tutorials.side-links a,
html.kb-page-machine-tutorials .mini-link, html.kb-page-machine-tutorials.mini-link {font-size:12px;color:var(--muted);border:0;background:transparent;padding:0;cursor:pointer}html.kb-page-machine-tutorials .side-links a:hover, html.kb-page-machine-tutorials.side-links a:hover,
html.kb-page-machine-tutorials .mini-link:hover, html.kb-page-machine-tutorials.mini-link:hover {color:var(--blue)}
html.kb-page-machine-tutorials .main, html.kb-page-machine-tutorials.main {min-width:0;display:grid;grid-template-rows:56px minmax(0,1fr);background:var(--panel)}html.kb-page-machine-tutorials .topbar, html.kb-page-machine-tutorials.topbar {border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 18px 0 22px;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(22px);z-index:5}html.kb-page-machine-tutorials .dark-theme .topbar, html.kb-page-machine-tutorials.dark-theme .topbar {background:rgba(28,28,30,.72)}html.kb-page-machine-tutorials .top-title, html.kb-page-machine-tutorials.top-title {min-width:0}html.kb-page-machine-tutorials .top-title strong, html.kb-page-machine-tutorials.top-title strong {display:block;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.kb-page-machine-tutorials .top-title span, html.kb-page-machine-tutorials.top-title span {display:block;margin-top:2px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.kb-page-machine-tutorials .top-actions, html.kb-page-machine-tutorials.top-actions {display:flex;align-items:center;gap:8px}html.kb-page-machine-tutorials .pill-button, html.kb-page-machine-tutorials.pill-button {border:1px solid var(--line);background:var(--chip);border-radius:999px;min-height:34px;padding:8px 13px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer}html.kb-page-machine-tutorials .pill-button:hover, html.kb-page-machine-tutorials.pill-button:hover {background:var(--hover)}html.kb-page-machine-tutorials .pill-button.primary, html.kb-page-machine-tutorials.pill-button.primary {border-color:transparent;background:var(--blue);color:white}html.kb-page-machine-tutorials .notif-wrap, html.kb-page-machine-tutorials.notif-wrap {position:relative}html.kb-page-machine-tutorials .badge, html.kb-page-machine-tutorials.badge {position:absolute;right:-3px;top:-4px;min-width:17px;height:17px;border-radius:999px;background:var(--red);color:white;font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--panel)}html.kb-page-machine-tutorials .badge.active, html.kb-page-machine-tutorials.badge.active {display:flex}html.kb-page-machine-tutorials .content-scroll, html.kb-page-machine-tutorials.content-scroll {overflow:auto;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%)}html.kb-page-machine-tutorials .reader, html.kb-page-machine-tutorials.reader {max-width:920px;margin:0 auto;padding:34px 28px 70px}html.kb-page-machine-tutorials .empty-state, html.kb-page-machine-tutorials.empty-state {height:calc(100dvh - 56px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:28px}html.kb-page-machine-tutorials .empty-card, html.kb-page-machine-tutorials.empty-card {max-width:520px}html.kb-page-machine-tutorials .empty-card h1, html.kb-page-machine-tutorials.empty-card h1 {margin:0 0 12px;font-size:34px;line-height:1.12;letter-spacing:-.04em;color:var(--ink)}html.kb-page-machine-tutorials .empty-card p, html.kb-page-machine-tutorials.empty-card p {margin:0;line-height:1.65}html.kb-page-machine-tutorials .article-head, html.kb-page-machine-tutorials.article-head {display:grid;gap:14px;margin-bottom:22px}html.kb-page-machine-tutorials .kicker, html.kb-page-machine-tutorials.kicker {display:flex;gap:8px;flex-wrap:wrap}html.kb-page-machine-tutorials .label, html.kb-page-machine-tutorials.label {display:inline-flex;align-items:center;min-height:26px;padding:5px 10px;border-radius:999px;background:var(--chip);color:var(--muted);font-size:12px;font-weight:650}html.kb-page-machine-tutorials .article-title, html.kb-page-machine-tutorials.article-title {font-size:clamp(2rem,4vw,4rem);line-height:1.04;letter-spacing:-.045em;margin:0;font-weight:720}html.kb-page-machine-tutorials .article-meta, html.kb-page-machine-tutorials.article-meta {display:flex;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:13px;line-height:1.4}html.kb-page-machine-tutorials .cover, html.kb-page-machine-tutorials.cover {margin:26px 0;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,rgba(0,113,227,.10),rgba(155,182,136,.18));min-height:180px;display:flex;align-items:center;justify-content:center;color:var(--muted)}html.kb-page-machine-tutorials .cover img, html.kb-page-machine-tutorials.cover img {width:100%;display:block;max-height:440px;object-fit:cover}html.kb-page-machine-tutorials .markdown-body, html.kb-page-machine-tutorials.markdown-body {font-size:16px;line-height:1.78;color:var(--ink);word-break:break-word}html.kb-page-machine-tutorials .markdown-body h1, html.kb-page-machine-tutorials.markdown-body h1,
html.kb-page-machine-tutorials .markdown-body h2, html.kb-page-machine-tutorials.markdown-body h2,
html.kb-page-machine-tutorials .markdown-body h3, html.kb-page-machine-tutorials.markdown-body h3 {letter-spacing:-.03em;line-height:1.18;margin:1.4em 0 .55em}html.kb-page-machine-tutorials .markdown-body h1, html.kb-page-machine-tutorials.markdown-body h1 {font-size:32px}html.kb-page-machine-tutorials .markdown-body h2, html.kb-page-machine-tutorials.markdown-body h2 {font-size:26px}html.kb-page-machine-tutorials .markdown-body h3, html.kb-page-machine-tutorials.markdown-body h3 {font-size:21px}html.kb-page-machine-tutorials .markdown-body p, html.kb-page-machine-tutorials.markdown-body p {margin:0 0 14px}html.kb-page-machine-tutorials .markdown-body code, html.kb-page-machine-tutorials.markdown-body code {padding:2px 6px;border-radius:7px;background:var(--chip);font-family:"SF Mono",Consolas,monospace;font-size:.92em}html.kb-page-machine-tutorials .markdown-body pre, html.kb-page-machine-tutorials.markdown-body pre {padding:16px;border-radius:18px;background:var(--chip);overflow:auto}html.kb-page-machine-tutorials .markdown-body blockquote, html.kb-page-machine-tutorials.markdown-body blockquote {margin:14px 0;padding:8px 0 8px 16px;border-left:3px solid var(--blue);color:var(--muted)}html.kb-page-machine-tutorials .markdown-body a, html.kb-page-machine-tutorials.markdown-body a {color:var(--blue)}html.kb-page-machine-tutorials .article-tools, html.kb-page-machine-tutorials.article-tools {display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0}html.kb-page-machine-tutorials .comments, html.kb-page-machine-tutorials.comments {margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}html.kb-page-machine-tutorials .comments-head, html.kb-page-machine-tutorials.comments-head {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}html.kb-page-machine-tutorials .comments-head h2, html.kb-page-machine-tutorials.comments-head h2 {margin:0;font-size:24px;letter-spacing:-.03em}html.kb-page-machine-tutorials .comment-form, html.kb-page-machine-tutorials.comment-form {display:grid;gap:10px;margin-bottom:18px}html.kb-page-machine-tutorials .textarea, html.kb-page-machine-tutorials.textarea {width:100%;border:1px solid var(--line);background:var(--panel);border-radius:18px;color:var(--ink);outline:none;min-height:88px;resize:vertical;padding:14px;line-height:1.55}html.kb-page-machine-tutorials .textarea:focus, html.kb-page-machine-tutorials.textarea:focus,
html.kb-page-machine-tutorials .input:focus, html.kb-page-machine-tutorials.input:focus,
html.kb-page-machine-tutorials .select:focus, html.kb-page-machine-tutorials.select:focus {border-color:rgba(0,113,227,.5);box-shadow:0 0 0 4px rgba(0,113,227,.12)}html.kb-page-machine-tutorials .comment-list, html.kb-page-machine-tutorials.comment-list {display:grid;gap:10px}html.kb-page-machine-tutorials .comment, html.kb-page-machine-tutorials.comment {border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:14px 16px}html.kb-page-machine-tutorials .comment.reply, html.kb-page-machine-tutorials.comment.reply {margin-left:34px;background:var(--panel-2)}html.kb-page-machine-tutorials .comment-meta, html.kb-page-machine-tutorials.comment-meta {display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12px}html.kb-page-machine-tutorials .comment-author, html.kb-page-machine-tutorials.comment-author {font-weight:700;color:var(--ink)}html.kb-page-machine-tutorials .comment-body, html.kb-page-machine-tutorials.comment-body {margin-top:8px;white-space:pre-wrap;line-height:1.62}html.kb-page-machine-tutorials .comment-actions, html.kb-page-machine-tutorials.comment-actions {margin-top:10px;display:flex;gap:12px}html.kb-page-machine-tutorials .comment-actions button, html.kb-page-machine-tutorials.comment-actions button {border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:650;cursor:pointer;padding:0}html.kb-page-machine-tutorials .input, html.kb-page-machine-tutorials.input,
html.kb-page-machine-tutorials .select, html.kb-page-machine-tutorials.select {width:100%;border:1px solid var(--line);background:var(--panel);border-radius:16px;color:var(--ink);outline:none;min-height:42px;padding:0 13px}html.kb-page-machine-tutorials .modal, html.kb-page-machine-tutorials.modal {position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:80;display:none;align-items:center;justify-content:center;padding:18px}html.kb-page-machine-tutorials .modal.active, html.kb-page-machine-tutorials.modal.active {display:flex}html.kb-page-machine-tutorials .modal-card, html.kb-page-machine-tutorials.modal-card {width:min(820px,100%);max-height:min(760px,calc(100dvh - 36px));overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}html.kb-page-machine-tutorials .modal.small .modal-card, html.kb-page-machine-tutorials.modal.small .modal-card {width:min(430px,100%)}html.kb-page-machine-tutorials .modal-head, html.kb-page-machine-tutorials.modal-head {position:sticky;top:0;background:var(--panel);z-index:1;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px}html.kb-page-machine-tutorials .modal-head h2, html.kb-page-machine-tutorials.modal-head h2 {margin:0;font-size:22px;letter-spacing:-.03em}html.kb-page-machine-tutorials .modal-body, html.kb-page-machine-tutorials.modal-body {padding:20px}html.kb-page-machine-tutorials .close, html.kb-page-machine-tutorials.close {border:0;background:var(--chip);width:34px;height:34px;border-radius:999px;cursor:pointer}html.kb-page-machine-tutorials .form-grid, html.kb-page-machine-tutorials.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}html.kb-page-machine-tutorials .field, html.kb-page-machine-tutorials.field {display:grid;gap:7px}html.kb-page-machine-tutorials .field label, html.kb-page-machine-tutorials.field label {font-size:13px;color:var(--muted);font-weight:650}html.kb-page-machine-tutorials .md-toolbar, html.kb-page-machine-tutorials.md-toolbar {display:flex;gap:7px;flex-wrap:wrap;padding:10px;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:var(--chip)}html.kb-page-machine-tutorials .md-button, html.kb-page-machine-tutorials.md-button {border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:700;cursor:pointer;padding:6px 8px;border-radius:999px}html.kb-page-machine-tutorials .md-button:hover, html.kb-page-machine-tutorials.md-button:hover {background:rgba(0,113,227,.10)}html.kb-page-machine-tutorials .md-editor, html.kb-page-machine-tutorials.md-editor {min-height:230px;border-radius:0 0 18px 18px}html.kb-page-machine-tutorials .preview, html.kb-page-machine-tutorials.preview {min-height:230px;border:1px solid var(--line);border-radius:18px;background:var(--panel-2);padding:16px;overflow:auto}html.kb-page-machine-tutorials .image-preview, html.kb-page-machine-tutorials.image-preview {margin-top:10px;border-radius:18px;overflow:hidden;border:1px solid var(--line);display:none}html.kb-page-machine-tutorials .image-preview.active, html.kb-page-machine-tutorials.image-preview.active {display:block}html.kb-page-machine-tutorials .image-preview img, html.kb-page-machine-tutorials.image-preview img {display:block;width:100%;max-height:190px;object-fit:cover}html.kb-page-machine-tutorials .actions, html.kb-page-machine-tutorials.actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}html.kb-page-machine-tutorials .status, html.kb-page-machine-tutorials.status {min-height:20px;margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.5}html.kb-page-machine-tutorials .status.error, html.kb-page-machine-tutorials.status.error {color:var(--red)}html.kb-page-machine-tutorials .status.ok, html.kb-page-machine-tutorials.status.ok {color:var(--green)}html.kb-page-machine-tutorials .auth-tabs, html.kb-page-machine-tutorials.auth-tabs {display:flex;gap:8px;padding:5px;border-radius:999px;background:var(--chip);width:fit-content;margin-bottom:16px}html.kb-page-machine-tutorials .auth-tab, html.kb-page-machine-tutorials.auth-tab {border:0;padding:8px 12px;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;font-weight:650}html.kb-page-machine-tutorials .auth-tab.active, html.kb-page-machine-tutorials.auth-tab.active {background:var(--panel);color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.08)}html.kb-page-machine-tutorials .dark-theme .auth-tab.active, html.kb-page-machine-tutorials.dark-theme .auth-tab.active {box-shadow:none;background:#2c2c2e}html.kb-page-machine-tutorials .auth-panel, html.kb-page-machine-tutorials.auth-panel {display:none}html.kb-page-machine-tutorials .auth-panel.active, html.kb-page-machine-tutorials.auth-panel.active {display:grid;gap:12px}html.kb-page-machine-tutorials .notif-panel, html.kb-page-machine-tutorials.notif-panel {position:fixed;right:16px;top:64px;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 88px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);z-index:70;display:none}html.kb-page-machine-tutorials .notif-panel.active, html.kb-page-machine-tutorials.notif-panel.active {display:block}html.kb-page-machine-tutorials .notif-head, html.kb-page-machine-tutorials.notif-head {display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)}html.kb-page-machine-tutorials .notif-head strong, html.kb-page-machine-tutorials.notif-head strong {font-size:16px}html.kb-page-machine-tutorials .notif-list, html.kb-page-machine-tutorials.notif-list {display:grid}html.kb-page-machine-tutorials .notif-item, html.kb-page-machine-tutorials.notif-item {border:0;background:transparent;text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}html.kb-page-machine-tutorials .notif-item:hover, html.kb-page-machine-tutorials.notif-item:hover {background:var(--hover)}html.kb-page-machine-tutorials .notif-item.unread, html.kb-page-machine-tutorials.notif-item.unread {background:rgba(0,113,227,.07)}html.kb-page-machine-tutorials .notif-item strong, html.kb-page-machine-tutorials.notif-item strong {display:block;font-size:14px;margin-bottom:5px}html.kb-page-machine-tutorials .notif-item p, html.kb-page-machine-tutorials.notif-item p {margin:0;color:var(--muted);font-size:12px;line-height:1.5}html.kb-page-machine-tutorials .mobile-menu, html.kb-page-machine-tutorials.mobile-menu {display:none}html.kb-page-machine-tutorials .toast, html.kb-page-machine-tutorials.toast {position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:rgba(29,29,31,.92);color:#fff;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:600;z-index:100;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}html.kb-page-machine-tutorials .toast.active, html.kb-page-machine-tutorials.toast.active {opacity:1;transform:translateX(-50%) translateY(-4px)}
@media (max-width:900px){body.kb-page-machine-tutorials {overflow:auto}html.kb-page-machine-tutorials .app, html.kb-page-machine-tutorials.app {height:100dvh;grid-template-columns:1fr}html.kb-page-machine-tutorials .sidebar, html.kb-page-machine-tutorials.sidebar {position:fixed;left:0;top:0;bottom:0;width:min(340px,88vw);z-index:60;transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow)}html.kb-page-machine-tutorials .sidebar.active, html.kb-page-machine-tutorials.sidebar.active {transform:translateX(0)}html.kb-page-machine-tutorials .main, html.kb-page-machine-tutorials.main {height:100dvh}html.kb-page-machine-tutorials .mobile-menu, html.kb-page-machine-tutorials.mobile-menu {display:inline-flex}html.kb-page-machine-tutorials .reader, html.kb-page-machine-tutorials.reader {padding:26px 18px 60px}html.kb-page-machine-tutorials .form-grid, html.kb-page-machine-tutorials.form-grid {grid-template-columns:1fr}html.kb-page-machine-tutorials .comment.reply, html.kb-page-machine-tutorials.comment.reply {margin-left:18px}html.kb-page-machine-tutorials .topbar, html.kb-page-machine-tutorials.topbar {padding-left:12px}html.kb-page-machine-tutorials .top-title strong, html.kb-page-machine-tutorials.top-title strong {max-width:50vw}html.kb-page-machine-tutorials .modal-card, html.kb-page-machine-tutorials.modal-card {border-radius:22px}}
/* 2026-05-31: long comments and short-window fixes */
html.kb-page-machine-tutorials .comment-list, html.kb-page-machine-tutorials.comment-list {max-height:min(540px,56dvh);overflow:auto;padding-right:4px;scrollbar-gutter:stable}html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list {min-height:0}html.kb-page-machine-tutorials .sidebar, html.kb-page-machine-tutorials.sidebar {min-height:0}html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {position:relative;z-index:2;background:var(--sidebar)}
@media (max-height:760px){html.kb-page-machine-tutorials .side-head, html.kb-page-machine-tutorials.side-head {padding:10px 12px 8px;gap:8px}html.kb-page-machine-tutorials .side-filters, html.kb-page-machine-tutorials.side-filters {padding:6px 12px 8px;gap:6px}html.kb-page-machine-tutorials .new-post, html.kb-page-machine-tutorials.new-post {height:36px}html.kb-page-machine-tutorials .search-box input, html.kb-page-machine-tutorials.search-box input {height:36px}html.kb-page-machine-tutorials .chip, html.kb-page-machine-tutorials.chip {padding:6px 9px}html.kb-page-machine-tutorials .post-item, html.kb-page-machine-tutorials.post-item {padding:9px}html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {padding:8px 12px}html.kb-page-machine-tutorials .user-card, html.kb-page-machine-tutorials.user-card {padding:6px}html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list {max-height:38dvh}html.kb-page-machine-tutorials .comment-list, html.kb-page-machine-tutorials.comment-list {max-height:42dvh}}
@media (max-width:900px){html.kb-page-machine-tutorials .comment-list, html.kb-page-machine-tutorials.comment-list {max-height:45dvh}html.kb-page-machine-tutorials .sidebar, html.kb-page-machine-tutorials.sidebar {overflow:auto}html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {position:sticky;bottom:0}}
/* 2026-05-31 hotfix: right reader uses one unified scroll; sidebar account stays visible */
html.kb-page-machine-tutorials .content-scroll, html.kb-page-machine-tutorials.content-scroll {overflow:auto!important;min-height:0!important}
html.kb-page-machine-tutorials .comment-list, html.kb-page-machine-tutorials.comment-list {max-height:none!important;overflow:visible!important;padding-right:0!important;scrollbar-gutter:auto!important}
html.kb-page-machine-tutorials .comments, html.kb-page-machine-tutorials.comments {overflow:visible!important}
html.kb-page-machine-tutorials .sidebar, html.kb-page-machine-tutorials.sidebar {display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important}
html.kb-page-machine-tutorials .side-head, html.kb-page-machine-tutorials.side-head,
html.kb-page-machine-tutorials .side-filters, html.kb-page-machine-tutorials.side-filters,
html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {flex:0 0 auto!important}
html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list {flex:1 1 auto!important;min-height:72px!important;max-height:none!important;overflow:auto!important}
html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {position:sticky!important;bottom:0!important;z-index:4!important;background:var(--sidebar)!important;border-top:1px solid var(--line)!important;box-shadow:0 -14px 24px rgba(0,0,0,.045)}
@media (max-height:760px){html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list {max-height:none!important}html.kb-page-machine-tutorials .comment-list, html.kb-page-machine-tutorials.comment-list {max-height:none!important;overflow:visible!important}html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {padding:8px 12px!important}html.kb-page-machine-tutorials .user-card, html.kb-page-machine-tutorials.user-card {padding:6px!important}}
@media (max-height:560px){html.kb-page-machine-tutorials .side-head, html.kb-page-machine-tutorials.side-head {padding:8px 12px 6px!important;gap:6px!important}html.kb-page-machine-tutorials .side-filters, html.kb-page-machine-tutorials.side-filters {padding:6px 12px!important;gap:6px!important;max-height:132px;overflow:auto}html.kb-page-machine-tutorials .new-post, html.kb-page-machine-tutorials.new-post {height:34px!important}html.kb-page-machine-tutorials .search-box input, html.kb-page-machine-tutorials.search-box input {height:34px!important}html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list {min-height:36px!important}html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {padding:6px 12px!important}html.kb-page-machine-tutorials .side-links, html.kb-page-machine-tutorials.side-links {gap:6px}html.kb-page-machine-tutorials .user-card, html.kb-page-machine-tutorials.user-card {padding:5px!important}html.kb-page-machine-tutorials .avatar, html.kb-page-machine-tutorials.avatar {width:28px;height:28px}}
/* final viewport scroll fix: keep the app fixed, scroll only the list and reader */
html.kb-page-machine-tutorials,
body.kb-page-machine-tutorials { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
body.kb-page-machine-tutorials { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; }
html.kb-page-machine-tutorials .app, html.kb-page-machine-tutorials.app {
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
overflow: hidden !important;
}
html.kb-page-machine-tutorials .sidebar, html.kb-page-machine-tutorials.sidebar {
height: 100% !important;
max-height: 100dvh !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
html.kb-page-machine-tutorials .side-head, html.kb-page-machine-tutorials.side-head { flex: 0 0 auto !important; }
html.kb-page-machine-tutorials .side-filters, html.kb-page-machine-tutorials.side-filters { flex: 0 1 auto !important; overflow-y: auto !important; overscroll-behavior: contain; }
html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list {
flex: 1 1 0 !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom {
flex: 0 0 auto !important;
position: relative !important;
bottom: auto !important;
z-index: 5 !important;
background: var(--sidebar) !important;
box-shadow: 0 -10px 22px rgba(0,0,0,.045) !important;
}
html.kb-page-machine-tutorials .main, html.kb-page-machine-tutorials.main {
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
display: grid !important;
grid-template-rows: 56px minmax(0, 1fr) !important;
}
html.kb-page-machine-tutorials .topbar, html.kb-page-machine-tutorials.topbar { flex: 0 0 56px !important; }
html.kb-page-machine-tutorials .content-scroll, html.kb-page-machine-tutorials.content-scroll {
min-height: 0 !important;
height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
html.kb-page-machine-tutorials .reader, html.kb-page-machine-tutorials.reader { min-height: 100% !important; }
html.kb-page-machine-tutorials .comments, html.kb-page-machine-tutorials.comments,
html.kb-page-machine-tutorials .comment-list, html.kb-page-machine-tutorials.comment-list {
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
scrollbar-gutter: auto !important;
}
@media (max-height: 760px){
html.kb-page-machine-tutorials .side-head, html.kb-page-machine-tutorials.side-head { padding: 10px 12px 8px !important; gap: 8px !important; }
html.kb-page-machine-tutorials .side-filters, html.kb-page-machine-tutorials.side-filters { padding: 6px 12px 8px !important; gap: 6px !important; max-height: 32dvh !important; }
html.kb-page-machine-tutorials .new-post, html.kb-page-machine-tutorials.new-post { height: 36px !important; }
html.kb-page-machine-tutorials .search-box input, html.kb-page-machine-tutorials.search-box input { height: 36px !important; }
html.kb-page-machine-tutorials .chip, html.kb-page-machine-tutorials.chip { padding: 6px 9px !important; }
html.kb-page-machine-tutorials .post-item, html.kb-page-machine-tutorials.post-item { padding: 9px !important; }
html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom { padding: 8px 12px !important; }
html.kb-page-machine-tutorials .user-card, html.kb-page-machine-tutorials.user-card { padding: 6px !important; }
}
@media (max-height: 560px){
html.kb-page-machine-tutorials .side-head, html.kb-page-machine-tutorials.side-head { padding: 7px 10px 5px !important; gap: 5px !important; }
html.kb-page-machine-tutorials .side-filters, html.kb-page-machine-tutorials.side-filters { padding: 5px 10px !important; max-height: 28dvh !important; }
html.kb-page-machine-tutorials .filter-label, html.kb-page-machine-tutorials.filter-label { margin-bottom: 4px !important; }
html.kb-page-machine-tutorials .new-post, html.kb-page-machine-tutorials.new-post { height: 32px !important; }
html.kb-page-machine-tutorials .search-box input, html.kb-page-machine-tutorials.search-box input { height: 32px !important; }
html.kb-page-machine-tutorials .post-list, html.kb-page-machine-tutorials.post-list { padding: 6px !important; }
html.kb-page-machine-tutorials .post-item, html.kb-page-machine-tutorials.post-item { padding: 7px !important; }
html.kb-page-machine-tutorials .side-bottom, html.kb-page-machine-tutorials.side-bottom { padding: 5px 10px !important; }
html.kb-page-machine-tutorials .side-links, html.kb-page-machine-tutorials.side-links { gap: 6px !important; }
html.kb-page-machine-tutorials .user-card, html.kb-page-machine-tutorials.user-card { padding: 4px !important; }
html.kb-page-machine-tutorials .avatar, html.kb-page-machine-tutorials.avatar { width: 27px !important; height: 27px !important; }
}
@media (max-width: 900px){
body.kb-page-machine-tutorials { overflow: hidden !important; }
html.kb-page-machine-tutorials .app, html.kb-page-machine-tutorials.app { height: 100vh !important; height: 100dvh !important; overflow: hidden !important; }
html.kb-page-machine-tutorials .main, html.kb-page-machine-tutorials.main { height: 100vh !important; height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
html.kb-page-machine-tutorials .sidebar, html.kb-page-machine-tutorials.sidebar {
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
html.kb-page-machine-tutorials .content-scroll, html.kb-page-machine-tutorials.content-scroll { min-height: 0 !important; height: 100% !important; overflow-y: auto !important; }
}
/* reply-thread-context */
html.kb-page-machine-tutorials .reply-context, html.kb-page-machine-tutorials.reply-context {margin:8px 0 6px;padding:7px 10px;border-radius:12px;background:var(--chip);color:var(--muted);font-size:12px;line-height:1.45;display:flex;gap:0;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap}
html.kb-page-machine-tutorials .reply-context .reply-route, html.kb-page-machine-tutorials.reply-context .reply-route {font-weight:750;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:42%}
html.kb-page-machine-tutorials .reply-context .reply-snippet, html.kb-page-machine-tutorials.reply-context .reply-snippet {min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1}
html.kb-page-machine-tutorials .comment.is-reply, html.kb-page-machine-tutorials.comment.is-reply {margin-left:34px;background:var(--panel-2)}
@media (max-width:720px){html.kb-page-machine-tutorials .comment.is-reply, html.kb-page-machine-tutorials.comment.is-reply {margin-left:16px}html.kb-page-machine-tutorials .reply-context, html.kb-page-machine-tutorials.reply-context {white-space:normal;display:block}html.kb-page-machine-tutorials .reply-context .reply-route, html.kb-page-machine-tutorials.reply-context .reply-route,
html.kb-page-machine-tutorials .reply-context .reply-snippet, html.kb-page-machine-tutorials.reply-context .reply-snippet {display:inline;max-width:none}}
html.kb-page-machine-tutorials .markdown-body table, html.kb-page-machine-tutorials.markdown-body table {width:100%;border-collapse:collapse;margin:16px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:block;max-width:100%;overflow-x:auto}html.kb-page-machine-tutorials .markdown-body th, html.kb-page-machine-tutorials.markdown-body th,
html.kb-page-machine-tutorials .markdown-body td, html.kb-page-machine-tutorials.markdown-body td {border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}html.kb-page-machine-tutorials .markdown-body th, html.kb-page-machine-tutorials.markdown-body th {background:var(--chip);font-weight:750}html.kb-page-machine-tutorials .markdown-body del, html.kb-page-machine-tutorials.markdown-body del {color:var(--muted)}html.kb-page-machine-tutorials .markdown-body .task-list, html.kb-page-machine-tutorials.markdown-body .task-list {list-style:none;padding-left:0}html.kb-page-machine-tutorials .markdown-body .task-list-item, html.kb-page-machine-tutorials.markdown-body .task-list-item {display:flex;align-items:flex-start;gap:8px}html.kb-page-machine-tutorials .markdown-body .task-list-item input, html.kb-page-machine-tutorials.markdown-body .task-list-item input {margin-top:.45em;accent-color:var(--blue)}html.kb-page-machine-tutorials .markdown-body dl, html.kb-page-machine-tutorials.markdown-body dl {margin:14px 0}html.kb-page-machine-tutorials .markdown-body dt, html.kb-page-machine-tutorials.markdown-body dt {font-weight:750;margin-top:10px}html.kb-page-machine-tutorials .markdown-body dd, html.kb-page-machine-tutorials.markdown-body dd {margin:4px 0 10px 20px;color:var(--muted)}html.kb-page-machine-tutorials .markdown-body .footnotes, html.kb-page-machine-tutorials.markdown-body .footnotes {margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}html.kb-page-machine-tutorials .markdown-body .footnotes ol, html.kb-page-machine-tutorials.markdown-body .footnotes ol {padding-left:22px}html.kb-page-machine-tutorials .markdown-body sup a, html.kb-page-machine-tutorials.markdown-body sup a {color:var(--blue);text-decoration:none}html.kb-page-machine-tutorials .markdown-body h1[id], html.kb-page-machine-tutorials.markdown-body h1[id],
html.kb-page-machine-tutorials .markdown-body h2[id], html.kb-page-machine-tutorials.markdown-body h2[id],
html.kb-page-machine-tutorials .markdown-body h3[id], html.kb-page-machine-tutorials.markdown-body h3[id],
html.kb-page-machine-tutorials .markdown-body h4[id], html.kb-page-machine-tutorials.markdown-body h4[id],
html.kb-page-machine-tutorials .markdown-body h5[id], html.kb-page-machine-tutorials.markdown-body h5[id],
html.kb-page-machine-tutorials .markdown-body h6[id], html.kb-page-machine-tutorials.markdown-body h6[id] {scroll-margin-top:72px}html.kb-page-machine-tutorials .markdown-body .heading-anchor, html.kb-page-machine-tutorials.markdown-body .heading-anchor {color:var(--muted);font-size:.72em;margin-left:8px;opacity:0;text-decoration:none}html.kb-page-machine-tutorials .markdown-body h1:hover .heading-anchor, html.kb-page-machine-tutorials.markdown-body h1:hover .heading-anchor,
html.kb-page-machine-tutorials .markdown-body h2:hover .heading-anchor, html.kb-page-machine-tutorials.markdown-body h2:hover .heading-anchor,
html.kb-page-machine-tutorials .markdown-body h3:hover .heading-anchor, html.kb-page-machine-tutorials.markdown-body h3:hover .heading-anchor,
html.kb-page-machine-tutorials .markdown-body h4:hover .heading-anchor, html.kb-page-machine-tutorials.markdown-body h4:hover .heading-anchor,
html.kb-page-machine-tutorials .markdown-body h5:hover .heading-anchor, html.kb-page-machine-tutorials.markdown-body h5:hover .heading-anchor,
html.kb-page-machine-tutorials .markdown-body h6:hover .heading-anchor, html.kb-page-machine-tutorials.markdown-body h6:hover .heading-anchor {opacity:.75}
html.kb-page-machine-tutorials .composer-inline, html.kb-page-machine-tutorials.composer-inline {max-width:980px;margin:0 auto;padding:34px 28px 70px;}
html.kb-page-machine-tutorials .composer-card-inline, html.kb-page-machine-tutorials.composer-card-inline {border:1px solid var(--line);background:var(--panel);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;}
html.kb-page-machine-tutorials .composer-card-inline .modal-head, html.kb-page-machine-tutorials.composer-card-inline .modal-head {position:static;}
html.kb-page-machine-tutorials .composer-card-inline .modal-body, html.kb-page-machine-tutorials.composer-card-inline .modal-body {padding:20px;}
html.kb-page-machine-tutorials .md-tabs, html.kb-page-machine-tutorials.md-tabs {display:flex;align-items:center;gap:0;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:var(--panel-2);overflow:hidden;width:fit-content;max-width:100%;}
html.kb-page-machine-tutorials .md-tab, html.kb-page-machine-tutorials.md-tab {border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px;font-weight:750;padding:9px 14px;cursor:pointer;}
html.kb-page-machine-tutorials .md-tab:last-child, html.kb-page-machine-tutorials.md-tab:last-child {border-right:0;}
html.kb-page-machine-tutorials .md-tab.active, html.kb-page-machine-tutorials.md-tab.active {background:var(--panel);color:var(--ink);}
html.kb-page-machine-tutorials .md-pane, html.kb-page-machine-tutorials.md-pane {display:none;}
html.kb-page-machine-tutorials .md-pane.active, html.kb-page-machine-tutorials.md-pane.active {display:block;}
html.kb-page-machine-tutorials .md-pane[data-md-pane="write"] .md-toolbar, html.kb-page-machine-tutorials.md-pane[data-md-pane="write"] .md-toolbar {border-radius:0;border-bottom:0;}
html.kb-page-machine-tutorials .md-pane[data-md-pane="write"] .md-editor, html.kb-page-machine-tutorials.md-pane[data-md-pane="write"] .md-editor {border-radius:0 0 18px 18px;min-height:380px;}
html.kb-page-machine-tutorials .md-pane[data-md-pane="preview"] .preview, html.kb-page-machine-tutorials.md-pane[data-md-pane="preview"] .preview {border-radius:0 18px 18px 18px;min-height:380px;}
html.kb-page-machine-tutorials .composer-inline .form-grid, html.kb-page-machine-tutorials.composer-inline .form-grid {margin-bottom:14px;}
@media (max-width:900px){html.kb-page-machine-tutorials .composer-inline, html.kb-page-machine-tutorials.composer-inline {padding:26px 18px 60px}html.kb-page-machine-tutorials .md-pane[data-md-pane="write"] .md-editor, html.kb-page-machine-tutorials.md-pane[data-md-pane="write"] .md-editor,
html.kb-page-machine-tutorials .md-pane[data-md-pane="preview"] .preview, html.kb-page-machine-tutorials.md-pane[data-md-pane="preview"] .preview {min-height:300px}}
/* Koneko full inline composer */
html.kb-page-machine-tutorials .composer-inline, html.kb-page-machine-tutorials.composer-inline {
width:100%;
max-width:none;
margin:0;
padding:34px 28px 70px;
display:block;
box-sizing:border-box;
}
html.kb-page-machine-tutorials .composer-card-inline, html.kb-page-machine-tutorials.composer-card-inline {
width:100%;
max-width:none;
margin:0;
box-sizing:border-box;
}
html.kb-page-machine-tutorials .composer-card-inline .modal-body, html.kb-page-machine-tutorials.composer-card-inline .modal-body,
html.kb-page-machine-tutorials .composer-card-inline form, html.kb-page-machine-tutorials.composer-card-inline form {
width:100%;
max-width:none;
box-sizing:border-box;
}
html.kb-page-machine-tutorials .composer-card-inline .textarea, html.kb-page-machine-tutorials.composer-card-inline .textarea,
html.kb-page-machine-tutorials .composer-card-inline .md-editor, html.kb-page-machine-tutorials.composer-card-inline .md-editor {
width:100%;
min-height:52vh;
box-sizing:border-box;
}
html.kb-page-machine-tutorials .composer-card-inline .preview, html.kb-page-machine-tutorials.composer-card-inline .preview {
width:100%;
min-height:52vh;
box-sizing:border-box;
}
html.kb-page-machine-tutorials .markdown-body hr, html.kb-page-machine-tutorials.markdown-body hr,
html.kb-page-machine-tutorials .preview hr, html.kb-page-machine-tutorials.preview hr {
border:0;
border-top:1px solid rgba(148,163,184,.36);
margin:20px 0;
}
/* Koneko full-page composer */
html.kb-page-machine-tutorials .reader.composer-mode, html.kb-page-machine-tutorials.reader.composer-mode {
max-width:none;
margin:0;
padding:0;
min-height:100%;
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-inline, html.kb-page-machine-tutorials.reader.composer-mode .composer-inline {
width:100%;
max-width:min(1360px, calc(100% - 72px));
margin:0 auto;
padding:36px 0 72px;
box-sizing:border-box;
min-height:100%;
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline {
width:100%;
max-width:none;
min-height:calc(100dvh - 56px - 108px);
margin:0;
border:1px solid var(--line);
border-radius:30px;
box-shadow:0 18px 56px rgba(0,0,0,.08);
background:var(--panel);
overflow:hidden;
display:flex;
flex-direction:column;
}
html.kb-page-machine-tutorials .dark-theme .reader.composer-mode .composer-card-inline, html.kb-page-machine-tutorials.dark-theme .reader.composer-mode .composer-card-inline {
box-shadow:0 18px 56px rgba(0,0,0,.22);
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .modal-head, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .modal-head {
position:static;
padding:20px 24px;
border-bottom:1px solid var(--line);
background:var(--panel);
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .modal-body, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .modal-body {
padding:24px;
flex:1;
display:flex;
flex-direction:column;
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline form, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline form {
flex:1;
display:flex;
flex-direction:column;
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .md-pane[data-md-pane="write"], html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .md-pane[data-md-pane="write"],
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .md-pane[data-md-pane="preview"], html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .md-pane[data-md-pane="preview"] {
flex:1;
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .md-editor, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .md-editor,
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .preview, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .preview {
min-height:58vh;
}
@media (max-width:900px){
html.kb-page-machine-tutorials .reader.composer-mode .composer-inline, html.kb-page-machine-tutorials.reader.composer-mode .composer-inline {
max-width:calc(100% - 28px);
padding:18px 0 54px;
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline {
border-radius:24px;
min-height:calc(100dvh - 56px - 72px);
}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .modal-head, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .modal-head {padding:18px;}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .modal-body, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .modal-body {padding:18px;}
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .md-editor, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .md-editor,
html.kb-page-machine-tutorials .reader.composer-mode .composer-card-inline .preview, html.kb-page-machine-tutorials.reader.composer-mode .composer-card-inline .preview {min-height:52vh;}
}
/* Koneko normal reader boundary guard */
html.kb-page-machine-tutorials .reader:not(.composer-mode), html.kb-page-machine-tutorials.reader:not(.composer-mode) {
max-width:920px;
margin:0 auto;
padding:34px 28px 70px;
}
/* Extracted inline styles from machine/tutorials.html */
html.kb-page-machine-tutorials .kb-page-machine-tutorials-inline-001 { display:flex;gap:8px;align-items:center;margin:8px 0 0; }
html.kb-page-machine-tutorials .kb-page-machine-tutorials-inline-002 { margin-top:14px; }
/* JS-rendered content utilities (moved out of HTML template strings) */
html.kb-page-machine-tutorials .md-align-left { text-align: left; }
html.kb-page-machine-tutorials .md-align-center { text-align: center; }
html.kb-page-machine-tutorials .md-align-right { text-align: right; }
html.kb-page-machine-tutorials .md-empty-text { color: var(--muted); }
html.kb-page-machine-tutorials .compact-message { padding: 12px; }
html.kb-page-machine-tutorials .danger-text { color: var(--red); }
html.kb-page-machine-tutorials .initially-hidden { display: none; }
html.kb-page-machine-tutorials .remove-image-option { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; }