/* Auto-extracted site styles. HTML files contain structure only. */
/* ============================================================ resource/feedback.html page scope: .kb-page-resource-feedback ============================================================ */
html.kb-page-resource-feedback {
--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-resource-feedback .dark-theme, html.kb-page-resource-feedback.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-resource-feedback * {box-sizing:border-box}html.kb-page-resource-feedback,
body.kb-page-resource-feedback {height:100%}body.kb-page-resource-feedback {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-resource-feedback a {color:inherit;text-decoration:none}html.kb-page-resource-feedback button,
html.kb-page-resource-feedback input,
html.kb-page-resource-feedback textarea,
html.kb-page-resource-feedback select {font:inherit}html.kb-page-resource-feedback button {color:inherit}html.kb-page-resource-feedback .app, html.kb-page-resource-feedback.app {height:100dvh;display:grid;grid-template-columns:320px minmax(0,1fr);background:var(--bg)}
html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.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-resource-feedback .side-head, html.kb-page-resource-feedback.side-head {padding:16px 14px 10px;display:grid;gap:12px}html.kb-page-resource-feedback .brand-row, html.kb-page-resource-feedback.brand-row {display:flex;align-items:center;justify-content:space-between;gap:10px}html.kb-page-resource-feedback .brand, html.kb-page-resource-feedback.brand {display:flex;align-items:center;gap:9px;min-width:0;font-weight:650;letter-spacing:-.02em}html.kb-page-resource-feedback .brand-mark, html.kb-page-resource-feedback.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-resource-feedback .brand span:last-child, html.kb-page-resource-feedback.brand span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.kb-page-resource-feedback .icon-button, html.kb-page-resource-feedback.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-resource-feedback .icon-button:hover, html.kb-page-resource-feedback.icon-button:hover {background:var(--hover);transform:translateY(-1px)}html.kb-page-resource-feedback .icon-button svg, html.kb-page-resource-feedback.icon-button svg {width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}html.kb-page-resource-feedback .theme-toggle .moon-icon, html.kb-page-resource-feedback.theme-toggle .moon-icon {display:none}html.kb-page-resource-feedback .dark-theme .theme-toggle .sun-icon, html.kb-page-resource-feedback.dark-theme .theme-toggle .sun-icon {display:none}html.kb-page-resource-feedback .dark-theme .theme-toggle .moon-icon, html.kb-page-resource-feedback.dark-theme .theme-toggle .moon-icon {display:block}html.kb-page-resource-feedback .new-post, html.kb-page-resource-feedback.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-resource-feedback .dark-theme .new-post, html.kb-page-resource-feedback.dark-theme .new-post {background:#f5f5f7;color:#111}html.kb-page-resource-feedback .new-post:disabled, html.kb-page-resource-feedback.new-post:disabled {opacity:.48;cursor:not-allowed}html.kb-page-resource-feedback .search-box, html.kb-page-resource-feedback.search-box {position:relative}html.kb-page-resource-feedback .search-box input, html.kb-page-resource-feedback.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-resource-feedback .search-box svg, html.kb-page-resource-feedback.search-box svg {position:absolute;left:12px;top:11px;width:17px;height:17px;stroke:var(--muted)}html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters {padding:8px 14px 12px;display:grid;gap:10px;border-bottom:1px solid var(--line)}html.kb-page-resource-feedback .filter-label, html.kb-page-resource-feedback.filter-label {font-size:12px;color:var(--muted);font-weight:650;margin-bottom:6px}html.kb-page-resource-feedback .chip-row, html.kb-page-resource-feedback.chip-row {display:flex;gap:7px;flex-wrap:wrap}html.kb-page-resource-feedback .chip, html.kb-page-resource-feedback.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-resource-feedback .chip.active, html.kb-page-resource-feedback.chip.active {background:rgba(0,113,227,.13);color:var(--blue)}html.kb-page-resource-feedback .post-list, html.kb-page-resource-feedback.post-list {overflow:auto;padding:10px}html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.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-resource-feedback .post-item:hover, html.kb-page-resource-feedback.post-item:hover {background:var(--hover)}html.kb-page-resource-feedback .post-item.active, html.kb-page-resource-feedback.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-resource-feedback .dark-theme .post-item.active, html.kb-page-resource-feedback.dark-theme .post-item.active {box-shadow:none}html.kb-page-resource-feedback .post-title, html.kb-page-resource-feedback.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-resource-feedback .post-excerpt, html.kb-page-resource-feedback.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-resource-feedback .post-meta, html.kb-page-resource-feedback.post-meta {display:flex;gap:6px;align-items:center;color:var(--muted-2);font-size:11px;min-width:0}html.kb-page-resource-feedback .dot, html.kb-page-resource-feedback.dot {width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom {padding:12px 14px 14px;border-top:1px solid var(--line);display:grid;gap:10px}html.kb-page-resource-feedback .user-card, html.kb-page-resource-feedback.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-resource-feedback .user-card:hover, html.kb-page-resource-feedback.user-card:hover {background:var(--hover)}html.kb-page-resource-feedback .avatar, html.kb-page-resource-feedback.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-resource-feedback .user-main, html.kb-page-resource-feedback.user-main {min-width:0}html.kb-page-resource-feedback .user-name, html.kb-page-resource-feedback.user-name {font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.kb-page-resource-feedback .user-sub, html.kb-page-resource-feedback.user-sub {font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.kb-page-resource-feedback .side-links, html.kb-page-resource-feedback.side-links {display:flex;gap:8px;flex-wrap:wrap}html.kb-page-resource-feedback .side-links a, html.kb-page-resource-feedback.side-links a,
html.kb-page-resource-feedback .mini-link, html.kb-page-resource-feedback.mini-link {font-size:12px;color:var(--muted);border:0;background:transparent;padding:0;cursor:pointer}html.kb-page-resource-feedback .side-links a:hover, html.kb-page-resource-feedback.side-links a:hover,
html.kb-page-resource-feedback .mini-link:hover, html.kb-page-resource-feedback.mini-link:hover {color:var(--blue)}
html.kb-page-resource-feedback .main, html.kb-page-resource-feedback.main {min-width:0;display:grid;grid-template-rows:56px minmax(0,1fr);background:var(--panel)}html.kb-page-resource-feedback .topbar, html.kb-page-resource-feedback.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-resource-feedback .dark-theme .topbar, html.kb-page-resource-feedback.dark-theme .topbar {background:rgba(28,28,30,.72)}html.kb-page-resource-feedback .top-title, html.kb-page-resource-feedback.top-title {min-width:0}html.kb-page-resource-feedback .top-title strong, html.kb-page-resource-feedback.top-title strong {display:block;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.kb-page-resource-feedback .top-title span, html.kb-page-resource-feedback.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-resource-feedback .top-actions, html.kb-page-resource-feedback.top-actions {display:flex;align-items:center;gap:8px}html.kb-page-resource-feedback .pill-button, html.kb-page-resource-feedback.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-resource-feedback .pill-button:hover, html.kb-page-resource-feedback.pill-button:hover {background:var(--hover)}html.kb-page-resource-feedback .pill-button.primary, html.kb-page-resource-feedback.pill-button.primary {border-color:transparent;background:var(--blue);color:white}html.kb-page-resource-feedback .notif-wrap, html.kb-page-resource-feedback.notif-wrap {position:relative}html.kb-page-resource-feedback .badge, html.kb-page-resource-feedback.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-resource-feedback .badge.active, html.kb-page-resource-feedback.badge.active {display:flex}html.kb-page-resource-feedback .content-scroll, html.kb-page-resource-feedback.content-scroll {overflow:auto;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%)}html.kb-page-resource-feedback .reader, html.kb-page-resource-feedback.reader {max-width:920px;margin:0 auto;padding:34px 28px 70px}html.kb-page-resource-feedback .empty-state, html.kb-page-resource-feedback.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-resource-feedback .empty-card, html.kb-page-resource-feedback.empty-card {max-width:520px}html.kb-page-resource-feedback .empty-card h1, html.kb-page-resource-feedback.empty-card h1 {margin:0 0 12px;font-size:34px;line-height:1.12;letter-spacing:-.04em;color:var(--ink)}html.kb-page-resource-feedback .empty-card p, html.kb-page-resource-feedback.empty-card p {margin:0;line-height:1.65}html.kb-page-resource-feedback .article-head, html.kb-page-resource-feedback.article-head {display:grid;gap:14px;margin-bottom:22px}html.kb-page-resource-feedback .kicker, html.kb-page-resource-feedback.kicker {display:flex;gap:8px;flex-wrap:wrap}html.kb-page-resource-feedback .label, html.kb-page-resource-feedback.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-resource-feedback .article-title, html.kb-page-resource-feedback.article-title {font-size:clamp(2rem,4vw,4rem);line-height:1.04;letter-spacing:-.045em;margin:0;font-weight:720}html.kb-page-resource-feedback .article-meta, html.kb-page-resource-feedback.article-meta {display:flex;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:13px;line-height:1.4}html.kb-page-resource-feedback .cover, html.kb-page-resource-feedback.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-resource-feedback .cover img, html.kb-page-resource-feedback.cover img {width:100%;display:block;max-height:440px;object-fit:cover}html.kb-page-resource-feedback .markdown-body, html.kb-page-resource-feedback.markdown-body {font-size:16px;line-height:1.78;color:var(--ink);word-break:break-word}html.kb-page-resource-feedback .markdown-body h1, html.kb-page-resource-feedback.markdown-body h1,
html.kb-page-resource-feedback .markdown-body h2, html.kb-page-resource-feedback.markdown-body h2,
html.kb-page-resource-feedback .markdown-body h3, html.kb-page-resource-feedback.markdown-body h3 {letter-spacing:-.03em;line-height:1.18;margin:1.4em 0 .55em}html.kb-page-resource-feedback .markdown-body h1, html.kb-page-resource-feedback.markdown-body h1 {font-size:32px}html.kb-page-resource-feedback .markdown-body h2, html.kb-page-resource-feedback.markdown-body h2 {font-size:26px}html.kb-page-resource-feedback .markdown-body h3, html.kb-page-resource-feedback.markdown-body h3 {font-size:21px}html.kb-page-resource-feedback .markdown-body p, html.kb-page-resource-feedback.markdown-body p {margin:0 0 14px}html.kb-page-resource-feedback .markdown-body code, html.kb-page-resource-feedback.markdown-body code {padding:2px 6px;border-radius:7px;background:var(--chip);font-family:"SF Mono",Consolas,monospace;font-size:.92em}html.kb-page-resource-feedback .markdown-body pre, html.kb-page-resource-feedback.markdown-body pre {padding:16px;border-radius:18px;background:var(--chip);overflow:auto}html.kb-page-resource-feedback .markdown-body blockquote, html.kb-page-resource-feedback.markdown-body blockquote {margin:14px 0;padding:8px 0 8px 16px;border-left:3px solid var(--blue);color:var(--muted)}html.kb-page-resource-feedback .markdown-body a, html.kb-page-resource-feedback.markdown-body a {color:var(--blue)}html.kb-page-resource-feedback .md-table-wrap, html.kb-page-resource-feedback.md-table-wrap {overflow-x:auto;max-width:100%;margin:16px 0;border-radius:16px}html.kb-page-resource-feedback .markdown-body table, html.kb-page-resource-feedback.markdown-body table {width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:table;max-width:100%}html.kb-page-resource-feedback .markdown-body th, html.kb-page-resource-feedback.markdown-body th,
html.kb-page-resource-feedback .markdown-body td, html.kb-page-resource-feedback.markdown-body td {border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}html.kb-page-resource-feedback .markdown-body th, html.kb-page-resource-feedback.markdown-body th {background:var(--chip);font-weight:750}html.kb-page-resource-feedback .markdown-body del, html.kb-page-resource-feedback.markdown-body del {color:var(--muted)}html.kb-page-resource-feedback .markdown-body .task-list, html.kb-page-resource-feedback.markdown-body .task-list {list-style:none;padding-left:0}html.kb-page-resource-feedback .markdown-body .task-list-item, html.kb-page-resource-feedback.markdown-body .task-list-item {display:flex;align-items:flex-start;gap:8px}html.kb-page-resource-feedback .markdown-body .task-list-item input, html.kb-page-resource-feedback.markdown-body .task-list-item input {margin-top:.45em;accent-color:var(--blue)}html.kb-page-resource-feedback .markdown-body dl, html.kb-page-resource-feedback.markdown-body dl {margin:14px 0}html.kb-page-resource-feedback .markdown-body dt, html.kb-page-resource-feedback.markdown-body dt {font-weight:750;margin-top:10px}html.kb-page-resource-feedback .markdown-body dd, html.kb-page-resource-feedback.markdown-body dd {margin:4px 0 10px 20px;color:var(--muted)}html.kb-page-resource-feedback .markdown-body .footnotes, html.kb-page-resource-feedback.markdown-body .footnotes {margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}html.kb-page-resource-feedback .markdown-body .footnotes ol, html.kb-page-resource-feedback.markdown-body .footnotes ol {padding-left:22px}html.kb-page-resource-feedback .markdown-body sup a, html.kb-page-resource-feedback.markdown-body sup a {color:var(--blue);text-decoration:none}html.kb-page-resource-feedback .markdown-body h1[id], html.kb-page-resource-feedback.markdown-body h1[id],
html.kb-page-resource-feedback .markdown-body h2[id], html.kb-page-resource-feedback.markdown-body h2[id],
html.kb-page-resource-feedback .markdown-body h3[id], html.kb-page-resource-feedback.markdown-body h3[id],
html.kb-page-resource-feedback .markdown-body h4[id], html.kb-page-resource-feedback.markdown-body h4[id],
html.kb-page-resource-feedback .markdown-body h5[id], html.kb-page-resource-feedback.markdown-body h5[id],
html.kb-page-resource-feedback .markdown-body h6[id], html.kb-page-resource-feedback.markdown-body h6[id] {scroll-margin-top:72px}html.kb-page-resource-feedback .markdown-body .heading-anchor, html.kb-page-resource-feedback.markdown-body .heading-anchor {color:var(--muted);font-size:.72em;margin-left:8px;opacity:.0;text-decoration:none}html.kb-page-resource-feedback .markdown-body h1:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h1:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h2:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h2:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h3:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h3:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h4:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h4:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h5:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h5:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h6:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h6:hover .heading-anchor {opacity:.75}html.kb-page-resource-feedback .article-tools, html.kb-page-resource-feedback.article-tools {display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0}html.kb-page-resource-feedback .comments, html.kb-page-resource-feedback.comments {margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}html.kb-page-resource-feedback .comments-head, html.kb-page-resource-feedback.comments-head {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}html.kb-page-resource-feedback .comments-head h2, html.kb-page-resource-feedback.comments-head h2 {margin:0;font-size:24px;letter-spacing:-.03em}html.kb-page-resource-feedback .comment-form, html.kb-page-resource-feedback.comment-form {display:grid;gap:10px;margin-bottom:18px}html.kb-page-resource-feedback .textarea, html.kb-page-resource-feedback.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-resource-feedback .textarea:focus, html.kb-page-resource-feedback.textarea:focus,
html.kb-page-resource-feedback .input:focus, html.kb-page-resource-feedback.input:focus,
html.kb-page-resource-feedback .select:focus, html.kb-page-resource-feedback.select:focus {border-color:rgba(0,113,227,.5);box-shadow:0 0 0 4px rgba(0,113,227,.12)}html.kb-page-resource-feedback .comment-list, html.kb-page-resource-feedback.comment-list {display:grid;gap:10px}html.kb-page-resource-feedback .comment, html.kb-page-resource-feedback.comment {border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:14px 16px}html.kb-page-resource-feedback .comment.reply, html.kb-page-resource-feedback.comment.reply {margin-left:34px;background:var(--panel-2)}html.kb-page-resource-feedback .comment-meta, html.kb-page-resource-feedback.comment-meta {display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12px}html.kb-page-resource-feedback .comment-author, html.kb-page-resource-feedback.comment-author {font-weight:700;color:var(--ink)}html.kb-page-resource-feedback .comment-body, html.kb-page-resource-feedback.comment-body {margin-top:8px;white-space:pre-wrap;line-height:1.62}html.kb-page-resource-feedback .comment-actions, html.kb-page-resource-feedback.comment-actions {margin-top:10px;display:flex;gap:12px}html.kb-page-resource-feedback .comment-actions button, html.kb-page-resource-feedback.comment-actions button {border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:650;cursor:pointer;padding:0}html.kb-page-resource-feedback .input, html.kb-page-resource-feedback.input,
html.kb-page-resource-feedback .select, html.kb-page-resource-feedback.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-resource-feedback .modal, html.kb-page-resource-feedback.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-resource-feedback .modal.active, html.kb-page-resource-feedback.modal.active {display:flex}html.kb-page-resource-feedback .modal-card, html.kb-page-resource-feedback.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-resource-feedback .modal.small .modal-card, html.kb-page-resource-feedback.modal.small .modal-card {width:min(430px,100%)}html.kb-page-resource-feedback .modal-head, html.kb-page-resource-feedback.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-resource-feedback .modal-head h2, html.kb-page-resource-feedback.modal-head h2 {margin:0;font-size:22px;letter-spacing:-.03em}html.kb-page-resource-feedback .modal-body, html.kb-page-resource-feedback.modal-body {padding:20px}html.kb-page-resource-feedback .close, html.kb-page-resource-feedback.close {border:0;background:var(--chip);width:34px;height:34px;border-radius:999px;cursor:pointer}html.kb-page-resource-feedback .form-grid, html.kb-page-resource-feedback.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}html.kb-page-resource-feedback .field, html.kb-page-resource-feedback.field {display:grid;gap:7px}html.kb-page-resource-feedback .field label, html.kb-page-resource-feedback.field label {font-size:13px;color:var(--muted);font-weight:650}html.kb-page-resource-feedback .md-toolbar, html.kb-page-resource-feedback.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-resource-feedback .md-button, html.kb-page-resource-feedback.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-resource-feedback .md-button:hover, html.kb-page-resource-feedback.md-button:hover {background:rgba(0,113,227,.10)}html.kb-page-resource-feedback .md-editor, html.kb-page-resource-feedback.md-editor {min-height:230px;border-radius:0 0 18px 18px}html.kb-page-resource-feedback .preview, html.kb-page-resource-feedback.preview {min-height:230px;border:1px solid var(--line);border-radius:18px;background:var(--panel-2);padding:16px;overflow:auto}html.kb-page-resource-feedback .image-preview-grid, html.kb-page-resource-feedback.image-preview-grid {display:none}html.kb-page-resource-feedback .image-preview-grid.active, html.kb-page-resource-feedback.image-preview-grid.active {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}html.kb-page-resource-feedback .image-preview-item, html.kb-page-resource-feedback.image-preview-item {position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);aspect-ratio:4/3}html.kb-page-resource-feedback .image-preview-item img, html.kb-page-resource-feedback.image-preview-item img {display:block;width:100%;height:100%;object-fit:cover}html.kb-page-resource-feedback .image-preview-remove, html.kb-page-resource-feedback.image-preview-remove {position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s ease,transform .14s ease}html.kb-page-resource-feedback .image-preview-remove:hover, html.kb-page-resource-feedback.image-preview-remove:hover {background:rgba(185,58,49,.92);transform:scale(1.08)}html.kb-page-resource-feedback .actions, html.kb-page-resource-feedback.actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}html.kb-page-resource-feedback .status, html.kb-page-resource-feedback.status {min-height:20px;margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.5}html.kb-page-resource-feedback .status.error, html.kb-page-resource-feedback.status.error {color:var(--red)}html.kb-page-resource-feedback .status.ok, html.kb-page-resource-feedback.status.ok {color:var(--green)}html.kb-page-resource-feedback .auth-tabs, html.kb-page-resource-feedback.auth-tabs {display:flex;gap:8px;padding:5px;border-radius:999px;background:var(--chip);width:fit-content;margin-bottom:16px}html.kb-page-resource-feedback .auth-tab, html.kb-page-resource-feedback.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-resource-feedback .auth-tab.active, html.kb-page-resource-feedback.auth-tab.active {background:var(--panel);color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.08)}html.kb-page-resource-feedback .dark-theme .auth-tab.active, html.kb-page-resource-feedback.dark-theme .auth-tab.active {box-shadow:none;background:#2c2c2e}html.kb-page-resource-feedback .auth-panel, html.kb-page-resource-feedback.auth-panel {display:none}html.kb-page-resource-feedback .auth-panel.active, html.kb-page-resource-feedback.auth-panel.active {display:grid;gap:12px}html.kb-page-resource-feedback .notif-panel, html.kb-page-resource-feedback.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-resource-feedback .notif-panel.active, html.kb-page-resource-feedback.notif-panel.active {display:block}html.kb-page-resource-feedback .notif-head, html.kb-page-resource-feedback.notif-head {display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)}html.kb-page-resource-feedback .notif-head strong, html.kb-page-resource-feedback.notif-head strong {font-size:16px}html.kb-page-resource-feedback .notif-list, html.kb-page-resource-feedback.notif-list {display:grid}html.kb-page-resource-feedback .notif-item, html.kb-page-resource-feedback.notif-item {border:0;background:transparent;text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}html.kb-page-resource-feedback .notif-item:hover, html.kb-page-resource-feedback.notif-item:hover {background:var(--hover)}html.kb-page-resource-feedback .notif-item.unread, html.kb-page-resource-feedback.notif-item.unread {background:rgba(0,113,227,.07)}html.kb-page-resource-feedback .notif-item strong, html.kb-page-resource-feedback.notif-item strong {display:block;font-size:14px;margin-bottom:5px}html.kb-page-resource-feedback .notif-item p, html.kb-page-resource-feedback.notif-item p {margin:0;color:var(--muted);font-size:12px;line-height:1.5}html.kb-page-resource-feedback .mobile-menu, html.kb-page-resource-feedback.mobile-menu {display:none}html.kb-page-resource-feedback .toast, html.kb-page-resource-feedback.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-resource-feedback .toast.active, html.kb-page-resource-feedback.toast.active {opacity:1;transform:translateX(-50%) translateY(-4px)}
@media (max-width:900px){body.kb-page-resource-feedback {overflow:auto}html.kb-page-resource-feedback .app, html.kb-page-resource-feedback.app {height:100dvh;grid-template-columns:1fr}html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.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-resource-feedback .sidebar.active, html.kb-page-resource-feedback.sidebar.active {transform:translateX(0)}html.kb-page-resource-feedback .main, html.kb-page-resource-feedback.main {height:100dvh}html.kb-page-resource-feedback .mobile-menu, html.kb-page-resource-feedback.mobile-menu {display:inline-flex}html.kb-page-resource-feedback .reader, html.kb-page-resource-feedback.reader {padding:26px 18px 60px}html.kb-page-resource-feedback .form-grid, html.kb-page-resource-feedback.form-grid {grid-template-columns:1fr}html.kb-page-resource-feedback .comment.reply, html.kb-page-resource-feedback.comment.reply {margin-left:18px}html.kb-page-resource-feedback .topbar, html.kb-page-resource-feedback.topbar {padding-left:12px}html.kb-page-resource-feedback .top-title strong, html.kb-page-resource-feedback.top-title strong {max-width:50vw}html.kb-page-resource-feedback .modal-card, html.kb-page-resource-feedback.modal-card {border-radius:22px}}
html.kb-page-resource-feedback .feedback-body, html.kb-page-resource-feedback.feedback-body {font-size:16px;line-height:1.78;color:var(--ink);word-break:break-word}html.kb-page-resource-feedback .status-stamp, html.kb-page-resource-feedback.status-stamp {display:inline-flex;align-items:center;min-height:28px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:750}html.kb-page-resource-feedback .status-stamp.pending, html.kb-page-resource-feedback.status-stamp.pending {background:rgba(173,123,23,.13);color:var(--amber)}html.kb-page-resource-feedback .status-stamp.approved, html.kb-page-resource-feedback.status-stamp.approved {background:rgba(95,141,104,.13);color:var(--green)}html.kb-page-resource-feedback .status-stamp.scheduled, html.kb-page-resource-feedback.status-stamp.scheduled {background:rgba(0,199,190,.14);color:#00a99d}html.kb-page-resource-feedback .dark-theme .status-stamp.scheduled, html.kb-page-resource-feedback.dark-theme .status-stamp.scheduled {color:#64fff4;background:rgba(100,255,244,.13)}html.kb-page-resource-feedback .status-stamp.completed, html.kb-page-resource-feedback.status-stamp.completed {background:rgba(0,113,227,.12);color:var(--blue)}html.kb-page-resource-feedback .status-stamp.rejected, html.kb-page-resource-feedback.status-stamp.rejected {background:rgba(185,58,49,.12);color:var(--red)}html.kb-page-resource-feedback .comment-list, html.kb-page-resource-feedback.comment-list {max-height:min(520px,56dvh);overflow:auto;padding-right:4px;scrollbar-gutter:stable}html.kb-page-resource-feedback .post-list, html.kb-page-resource-feedback.post-list {min-height:0}html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.sidebar {min-height:0}html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom {position:relative;z-index:2;background:var(--sidebar)}@media (max-height:760px){html.kb-page-resource-feedback .side-head, html.kb-page-resource-feedback.side-head {padding:10px 12px 8px;gap:8px}html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters {padding:6px 12px 8px;gap:6px}html.kb-page-resource-feedback .new-post, html.kb-page-resource-feedback.new-post {height:36px}html.kb-page-resource-feedback .search-box input, html.kb-page-resource-feedback.search-box input {height:36px}html.kb-page-resource-feedback .chip, html.kb-page-resource-feedback.chip {padding:6px 9px}html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item {padding:9px}html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom {padding:8px 12px}html.kb-page-resource-feedback .user-card, html.kb-page-resource-feedback.user-card {padding:6px}html.kb-page-resource-feedback .post-list, html.kb-page-resource-feedback.post-list {max-height:38dvh}html.kb-page-resource-feedback .comment-list, html.kb-page-resource-feedback.comment-list {max-height:42dvh}}@media (max-width:900px){html.kb-page-resource-feedback .comment-list, html.kb-page-resource-feedback.comment-list {max-height:45dvh}html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.sidebar {overflow:auto}html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom {position:sticky;bottom:0}}
html.kb-page-resource-feedback,
body.kb-page-resource-feedback { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
body.kb-page-resource-feedback { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; }
html.kb-page-resource-feedback .app, html.kb-page-resource-feedback.app {
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
overflow: hidden !important;
}
html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.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-resource-feedback .side-head, html.kb-page-resource-feedback.side-head { flex: 0 0 auto !important; }
html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters { flex: 0 1 auto !important; overflow-y: auto !important; overscroll-behavior: contain; }
html.kb-page-resource-feedback .post-list, html.kb-page-resource-feedback.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-resource-feedback .side-bottom, html.kb-page-resource-feedback.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-resource-feedback .main, html.kb-page-resource-feedback.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-resource-feedback .topbar, html.kb-page-resource-feedback.topbar { flex: 0 0 56px !important; }
html.kb-page-resource-feedback .content-scroll, html.kb-page-resource-feedback.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-resource-feedback .reader, html.kb-page-resource-feedback.reader { min-height: 100% !important; }
html.kb-page-resource-feedback .comments, html.kb-page-resource-feedback.comments,
html.kb-page-resource-feedback .comment-list, html.kb-page-resource-feedback.comment-list {
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
scrollbar-gutter: auto !important;
}
@media (max-height: 760px){
html.kb-page-resource-feedback .side-head, html.kb-page-resource-feedback.side-head { padding: 10px 12px 8px !important; gap: 8px !important; }
html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters { padding: 6px 12px 8px !important; gap: 6px !important; max-height: 32dvh !important; }
html.kb-page-resource-feedback .new-post, html.kb-page-resource-feedback.new-post { height: 36px !important; }
html.kb-page-resource-feedback .search-box input, html.kb-page-resource-feedback.search-box input { height: 36px !important; }
html.kb-page-resource-feedback .chip, html.kb-page-resource-feedback.chip { padding: 6px 9px !important; }
html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item { padding: 9px !important; }
html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom { padding: 8px 12px !important; }
html.kb-page-resource-feedback .user-card, html.kb-page-resource-feedback.user-card { padding: 6px !important; }
}
@media (max-height: 560px){
html.kb-page-resource-feedback .side-head, html.kb-page-resource-feedback.side-head { padding: 7px 10px 5px !important; gap: 5px !important; }
html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters { padding: 5px 10px !important; max-height: 28dvh !important; }
html.kb-page-resource-feedback .filter-label, html.kb-page-resource-feedback.filter-label { margin-bottom: 4px !important; }
html.kb-page-resource-feedback .new-post, html.kb-page-resource-feedback.new-post { height: 32px !important; }
html.kb-page-resource-feedback .search-box input, html.kb-page-resource-feedback.search-box input { height: 32px !important; }
html.kb-page-resource-feedback .post-list, html.kb-page-resource-feedback.post-list { padding: 6px !important; }
html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item { padding: 7px !important; }
html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom { padding: 5px 10px !important; }
html.kb-page-resource-feedback .side-links, html.kb-page-resource-feedback.side-links { gap: 6px !important; }
html.kb-page-resource-feedback .user-card, html.kb-page-resource-feedback.user-card { padding: 4px !important; }
html.kb-page-resource-feedback .avatar, html.kb-page-resource-feedback.avatar { width: 27px !important; height: 27px !important; }
}
@media (max-width: 900px){
body.kb-page-resource-feedback { overflow: hidden !important; }
html.kb-page-resource-feedback .app, html.kb-page-resource-feedback.app { height: 100vh !important; height: 100dvh !important; overflow: hidden !important; }
html.kb-page-resource-feedback .main, html.kb-page-resource-feedback.main { height: 100vh !important; height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.sidebar {
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
html.kb-page-resource-feedback .content-scroll, html.kb-page-resource-feedback.content-scroll { min-height: 0 !important; height: 100% !important; overflow-y: auto !important; }
}
html.kb-page-resource-feedback,
body.kb-page-resource-feedback {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.kb-page-resource-feedback {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
}
html.kb-page-resource-feedback .app, html.kb-page-resource-feedback.app {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
overflow: hidden !important;
display: grid !important;
grid-template-columns: 320px minmax(0, 1fr) !important;
}
html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.sidebar {
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
overflow: hidden !important;
display: grid !important;
grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}
html.kb-page-resource-feedback .side-head, html.kb-page-resource-feedback.side-head,
html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters,
html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom {
min-height: 0 !important;
}
html.kb-page-resource-feedback .side-head, html.kb-page-resource-feedback.side-head { grid-row: 1 !important; }
html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters { grid-row: 2 !important; overflow-y: auto !important; overscroll-behavior: contain; }
html.kb-page-resource-feedback .post-list, html.kb-page-resource-feedback.post-list {
grid-row: 3 !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-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom {
grid-row: 4 !important;
position: relative !important;
bottom: auto !important;
z-index: 20 !important;
background: var(--sidebar) !important;
border-top: 1px solid var(--line) !important;
box-shadow: 0 -12px 24px rgba(0,0,0,.05) !important;
}
html.kb-page-resource-feedback .main, html.kb-page-resource-feedback.main {
position: relative !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
overflow: hidden !important;
display: block !important;
background: var(--panel) !important;
}
html.kb-page-resource-feedback .topbar, html.kb-page-resource-feedback.topbar {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 56px !important;
min-height: 56px !important;
z-index: 10 !important;
}
html.kb-page-resource-feedback .content-scroll, html.kb-page-resource-feedback.content-scroll {
position: absolute !important;
top: 56px !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
html.kb-page-resource-feedback .reader, html.kb-page-resource-feedback.reader {
min-height: auto !important;
height: auto !important;
overflow: visible !important;
}
html.kb-page-resource-feedback .comments, html.kb-page-resource-feedback.comments,
html.kb-page-resource-feedback .comment-list, html.kb-page-resource-feedback.comment-list {
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
scrollbar-gutter: auto !important;
}
@media (max-height: 720px){
html.kb-page-resource-feedback .side-head, html.kb-page-resource-feedback.side-head { padding: 8px 10px 6px !important; gap: 6px !important; }
html.kb-page-resource-feedback .brand-mark, html.kb-page-resource-feedback.brand-mark { width: 19px !important; height: 19px !important; }
html.kb-page-resource-feedback .new-post, html.kb-page-resource-feedback.new-post { height: 32px !important; }
html.kb-page-resource-feedback .search-box input, html.kb-page-resource-feedback.search-box input { height: 32px !important; }
html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters { padding: 5px 10px !important; gap: 5px !important; max-height: 30dvh !important; }
html.kb-page-resource-feedback .filter-label, html.kb-page-resource-feedback.filter-label { margin-bottom: 4px !important; }
html.kb-page-resource-feedback .chip, html.kb-page-resource-feedback.chip { padding: 5px 8px !important; font-size: 11px !important; }
html.kb-page-resource-feedback .post-list, html.kb-page-resource-feedback.post-list { padding: 6px !important; }
html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item { padding: 7px !important; gap: 5px !important; }
html.kb-page-resource-feedback .post-excerpt, html.kb-page-resource-feedback.post-excerpt { -webkit-line-clamp: 1 !important; }
html.kb-page-resource-feedback .side-bottom, html.kb-page-resource-feedback.side-bottom { padding: 5px 10px !important; }
html.kb-page-resource-feedback .user-card, html.kb-page-resource-feedback.user-card { padding: 4px !important; gap: 8px !important; }
html.kb-page-resource-feedback .avatar, html.kb-page-resource-feedback.avatar { width: 27px !important; height: 27px !important; }
html.kb-page-resource-feedback .side-links, html.kb-page-resource-feedback.side-links { gap: 6px !important; }
}
@media (max-height: 500px){
html.kb-page-resource-feedback .side-filters, html.kb-page-resource-feedback.side-filters { max-height: 24dvh !important; }
html.kb-page-resource-feedback .brand span:last-child, html.kb-page-resource-feedback.brand span:last-child { max-width: 150px !important; }
html.kb-page-resource-feedback .user-sub, html.kb-page-resource-feedback.user-sub { display: none !important; }
}
@media (max-width: 900px){
html.kb-page-resource-feedback .app, html.kb-page-resource-feedback.app { grid-template-columns: 1fr !important; }
html.kb-page-resource-feedback .sidebar, html.kb-page-resource-feedback.sidebar {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: min(340px, 88vw) !important;
height: 100vh !important;
height: 100dvh !important;
transform: translateX(-105%);
z-index: 60 !important;
}
html.kb-page-resource-feedback .sidebar.active, html.kb-page-resource-feedback.sidebar.active { transform: translateX(0); }
html.kb-page-resource-feedback .main, html.kb-page-resource-feedback.main { width: 100vw !important; }
html.kb-page-resource-feedback .mobile-menu, html.kb-page-resource-feedback.mobile-menu { display: inline-flex !important; }
}
html.kb-page-resource-feedback .reply-context, html.kb-page-resource-feedback.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-resource-feedback .reply-context .reply-route, html.kb-page-resource-feedback.reply-context .reply-route {font-weight:750;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:42%}
html.kb-page-resource-feedback .reply-context .reply-snippet, html.kb-page-resource-feedback.reply-context .reply-snippet {min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1}
html.kb-page-resource-feedback .comment.is-reply, html.kb-page-resource-feedback.comment.is-reply {margin-left:34px;background:var(--panel-2)}
@media (max-width:720px){html.kb-page-resource-feedback .comment.is-reply, html.kb-page-resource-feedback.comment.is-reply {margin-left:16px}html.kb-page-resource-feedback .reply-context, html.kb-page-resource-feedback.reply-context {white-space:normal;display:block}html.kb-page-resource-feedback .reply-context .reply-route, html.kb-page-resource-feedback.reply-context .reply-route,
html.kb-page-resource-feedback .reply-context .reply-snippet, html.kb-page-resource-feedback.reply-context .reply-snippet {display:inline;max-width:none}}
html.kb-page-resource-feedback .md-table-wrap, html.kb-page-resource-feedback.md-table-wrap {overflow-x:auto;max-width:100%;margin:16px 0;border-radius:16px}html.kb-page-resource-feedback .markdown-body table, html.kb-page-resource-feedback.markdown-body table {width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:table;max-width:100%}html.kb-page-resource-feedback .markdown-body th, html.kb-page-resource-feedback.markdown-body th,
html.kb-page-resource-feedback .markdown-body td, html.kb-page-resource-feedback.markdown-body td {border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}html.kb-page-resource-feedback .markdown-body th, html.kb-page-resource-feedback.markdown-body th {background:var(--chip);font-weight:750}html.kb-page-resource-feedback .markdown-body del, html.kb-page-resource-feedback.markdown-body del {color:var(--muted)}html.kb-page-resource-feedback .markdown-body .task-list, html.kb-page-resource-feedback.markdown-body .task-list {list-style:none;padding-left:0}html.kb-page-resource-feedback .markdown-body .task-list-item, html.kb-page-resource-feedback.markdown-body .task-list-item {display:flex;align-items:flex-start;gap:8px}html.kb-page-resource-feedback .markdown-body .task-list-item input, html.kb-page-resource-feedback.markdown-body .task-list-item input {margin-top:.45em;accent-color:var(--blue)}html.kb-page-resource-feedback .markdown-body dl, html.kb-page-resource-feedback.markdown-body dl {margin:14px 0}html.kb-page-resource-feedback .markdown-body dt, html.kb-page-resource-feedback.markdown-body dt {font-weight:750;margin-top:10px}html.kb-page-resource-feedback .markdown-body dd, html.kb-page-resource-feedback.markdown-body dd {margin:4px 0 10px 20px;color:var(--muted)}html.kb-page-resource-feedback .markdown-body .footnotes, html.kb-page-resource-feedback.markdown-body .footnotes {margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}html.kb-page-resource-feedback .markdown-body .footnotes ol, html.kb-page-resource-feedback.markdown-body .footnotes ol {padding-left:22px}html.kb-page-resource-feedback .markdown-body sup a, html.kb-page-resource-feedback.markdown-body sup a {color:var(--blue);text-decoration:none}html.kb-page-resource-feedback .markdown-body h1[id], html.kb-page-resource-feedback.markdown-body h1[id],
html.kb-page-resource-feedback .markdown-body h2[id], html.kb-page-resource-feedback.markdown-body h2[id],
html.kb-page-resource-feedback .markdown-body h3[id], html.kb-page-resource-feedback.markdown-body h3[id],
html.kb-page-resource-feedback .markdown-body h4[id], html.kb-page-resource-feedback.markdown-body h4[id],
html.kb-page-resource-feedback .markdown-body h5[id], html.kb-page-resource-feedback.markdown-body h5[id],
html.kb-page-resource-feedback .markdown-body h6[id], html.kb-page-resource-feedback.markdown-body h6[id] {scroll-margin-top:72px}html.kb-page-resource-feedback .markdown-body .heading-anchor, html.kb-page-resource-feedback.markdown-body .heading-anchor {color:var(--muted);font-size:.72em;margin-left:8px;opacity:0;text-decoration:none}html.kb-page-resource-feedback .markdown-body h1:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h1:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h2:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h2:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h3:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h3:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h4:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h4:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h5:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h5:hover .heading-anchor,
html.kb-page-resource-feedback .markdown-body h6:hover .heading-anchor, html.kb-page-resource-feedback.markdown-body h6:hover .heading-anchor {opacity:.75}
html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item {position:relative;overflow:hidden;padding-right:96px;}
html.kb-page-resource-feedback .post-item .post-title, html.kb-page-resource-feedback.post-item .post-title,
html.kb-page-resource-feedback .post-item .post-excerpt, html.kb-page-resource-feedback.post-item .post-excerpt,
html.kb-page-resource-feedback .post-item .post-meta, html.kb-page-resource-feedback.post-item .post-meta {position:relative;z-index:2;}
html.kb-page-resource-feedback .post-watermark, html.kb-page-resource-feedback.post-watermark {position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(-13deg);z-index:1;pointer-events:none;user-select:none;border:2px solid currentColor;border-radius:10px;padding:5px 8px;font-size:18px;line-height:1;font-weight:860;letter-spacing:.10em;opacity:.24;white-space:nowrap;mix-blend-mode:multiply;}
html.kb-page-resource-feedback .dark-theme .post-watermark, html.kb-page-resource-feedback.dark-theme .post-watermark {mix-blend-mode:normal;opacity:.30;}
html.kb-page-resource-feedback .post-item:hover .post-watermark, html.kb-page-resource-feedback.post-item:hover .post-watermark,
html.kb-page-resource-feedback .post-item.active .post-watermark, html.kb-page-resource-feedback.post-item.active .post-watermark {opacity:.42;}
html.kb-page-resource-feedback .post-watermark.pending, html.kb-page-resource-feedback.post-watermark.pending {color:var(--amber);}
html.kb-page-resource-feedback .post-watermark.approved, html.kb-page-resource-feedback.post-watermark.approved {color:var(--green);}
html.kb-page-resource-feedback .post-watermark.rejected, html.kb-page-resource-feedback.post-watermark.rejected {color:var(--red);}
html.kb-page-resource-feedback .post-watermark.completed, html.kb-page-resource-feedback.post-watermark.completed {color:var(--blue);}
html.kb-page-resource-feedback .post-watermark.scheduled, html.kb-page-resource-feedback.post-watermark.scheduled {color:#00c7be;}
html.kb-page-resource-feedback .dark-theme .post-watermark.scheduled, html.kb-page-resource-feedback.dark-theme .post-watermark.scheduled {color:#64fff4;}
@media (max-width:900px){html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item {padding-right:86px}html.kb-page-resource-feedback .post-watermark, html.kb-page-resource-feedback.post-watermark {right:7px;font-size:16px;padding:5px 7px;}}
@media (max-width:420px){html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item {padding-right:76px}html.kb-page-resource-feedback .post-watermark, html.kb-page-resource-feedback.post-watermark {font-size:14px;letter-spacing:.06em;}}
/* ============ 多图画廊 / 列表缩略图 / 布局优化 ============ */
html.kb-page-resource-feedback .gallery, html.kb-page-resource-feedback.gallery {display:flex;flex-direction:column;gap:20px;margin:26px 0}
html.kb-page-resource-feedback .gallery-item, html.kb-page-resource-feedback.gallery-item {display:block;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);text-decoration:none;line-height:0}
html.kb-page-resource-feedback .gallery-item img, html.kb-page-resource-feedback.gallery-item img {display:block;width:100%;max-height:520px;object-fit:cover;line-height:0}
html.kb-page-resource-feedback .post-item, html.kb-page-resource-feedback.post-item {position:relative;overflow:hidden;padding-right:96px}
html.kb-page-resource-feedback .post-item.has-thumb, html.kb-page-resource-feedback.post-item.has-thumb {padding-left:64px}
html.kb-page-resource-feedback .post-thumb, html.kb-page-resource-feedback.post-thumb {position:absolute;left:10px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid var(--line);background:var(--panel-2);z-index:2}
html.kb-page-resource-feedback .post-list .post-item + .post-item, html.kb-page-resource-feedback.post-list .post-item + .post-item {border-top:1px solid var(--line);border-radius:0}
html.kb-page-resource-feedback .post-item .post-title, html.kb-page-resource-feedback.post-item .post-title {min-width:0}
html.kb-page-resource-feedback .post-item .post-excerpt, html.kb-page-resource-feedback.post-item .post-excerpt {min-width:0}
html.kb-page-resource-feedback .post-item .post-meta, html.kb-page-resource-feedback.post-item .post-meta {min-width:0}
html.kb-page-resource-feedback .field-wide, html.kb-page-resource-feedback.field-wide {grid-column:1 / -1}
html.kb-page-resource-feedback .composer-inline, html.kb-page-resource-feedback.composer-inline {max-width:980px;margin:0 auto;padding:34px 28px 70px;}
html.kb-page-resource-feedback .composer-card-inline, html.kb-page-resource-feedback.composer-card-inline {border:1px solid var(--line);background:var(--panel);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;}
html.kb-page-resource-feedback .composer-card-inline .modal-head, html.kb-page-resource-feedback.composer-card-inline .modal-head {position:static;}
html.kb-page-resource-feedback .composer-card-inline .modal-body, html.kb-page-resource-feedback.composer-card-inline .modal-body {padding:20px;}
html.kb-page-resource-feedback .md-tabs, html.kb-page-resource-feedback.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-resource-feedback .md-tab, html.kb-page-resource-feedback.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-resource-feedback .md-tab:last-child, html.kb-page-resource-feedback.md-tab:last-child {border-right:0;}
html.kb-page-resource-feedback .md-tab.active, html.kb-page-resource-feedback.md-tab.active {background:var(--panel);color:var(--ink);}
html.kb-page-resource-feedback .md-pane, html.kb-page-resource-feedback.md-pane {display:none;}
html.kb-page-resource-feedback .md-pane.active, html.kb-page-resource-feedback.md-pane.active {display:block;}
html.kb-page-resource-feedback .md-pane[data-md-pane="write"] .md-toolbar, html.kb-page-resource-feedback.md-pane[data-md-pane="write"] .md-toolbar {border-radius:0;border-bottom:0;}
html.kb-page-resource-feedback .md-pane[data-md-pane="write"] .md-editor, html.kb-page-resource-feedback.md-pane[data-md-pane="write"] .md-editor {border-radius:0 0 18px 18px;min-height:380px;}
html.kb-page-resource-feedback .md-pane[data-md-pane="preview"] .preview, html.kb-page-resource-feedback.md-pane[data-md-pane="preview"] .preview {border-radius:0 18px 18px 18px;min-height:380px;}
html.kb-page-resource-feedback .composer-inline .form-grid, html.kb-page-resource-feedback.composer-inline .form-grid {margin-bottom:14px;}
@media (max-width:900px){html.kb-page-resource-feedback .composer-inline, html.kb-page-resource-feedback.composer-inline {padding:26px 18px 60px}html.kb-page-resource-feedback .md-pane[data-md-pane="write"] .md-editor, html.kb-page-resource-feedback.md-pane[data-md-pane="write"] .md-editor,
html.kb-page-resource-feedback .md-pane[data-md-pane="preview"] .preview, html.kb-page-resource-feedback.md-pane[data-md-pane="preview"] .preview {min-height:300px}}
html.kb-page-resource-feedback .composer-inline, html.kb-page-resource-feedback.composer-inline {
width:100%;
max-width:none;
margin:0;
padding:34px 28px 70px;
display:block;
box-sizing:border-box;
}
html.kb-page-resource-feedback .composer-card-inline, html.kb-page-resource-feedback.composer-card-inline {
width:100%;
max-width:none;
margin:0;
box-sizing:border-box;
}
html.kb-page-resource-feedback .composer-card-inline .modal-body, html.kb-page-resource-feedback.composer-card-inline .modal-body,
html.kb-page-resource-feedback .composer-card-inline form, html.kb-page-resource-feedback.composer-card-inline form {
width:100%;
max-width:none;
box-sizing:border-box;
}
html.kb-page-resource-feedback .composer-card-inline .textarea, html.kb-page-resource-feedback.composer-card-inline .textarea,
html.kb-page-resource-feedback .composer-card-inline .md-editor, html.kb-page-resource-feedback.composer-card-inline .md-editor {
width:100%;
min-height:52vh;
box-sizing:border-box;
}
html.kb-page-resource-feedback .composer-card-inline .preview, html.kb-page-resource-feedback.composer-card-inline .preview {
width:100%;
min-height:52vh;
box-sizing:border-box;
}
html.kb-page-resource-feedback .markdown-body hr, html.kb-page-resource-feedback.markdown-body hr,
html.kb-page-resource-feedback .preview hr, html.kb-page-resource-feedback.preview hr {
border:0;
border-top:1px solid rgba(148,163,184,.36);
margin:20px 0;
}
html.kb-page-resource-feedback .reader.composer-mode, html.kb-page-resource-feedback.reader.composer-mode {
max-width:none;
margin:0;
padding:0;
min-height:100%;
}
html.kb-page-resource-feedback .reader.composer-mode .composer-inline, html.kb-page-resource-feedback.reader.composer-mode .composer-inline {
width:100%;
max-width:none;
margin:0;
padding:34px 42px 70px;
box-sizing:border-box;
min-height:100%;
}
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline {
width:100%;
max-width:none;
min-height:calc(100dvh - 56px - 104px);
margin:0;
border:0;
border-radius:0;
box-shadow:none;
background:transparent;
overflow:visible;
display:flex;
flex-direction:column;
}
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .modal-head, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .modal-head {
position:static;
padding:0 0 22px;
border-bottom:1px solid var(--line);
background:transparent;
}
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .modal-body, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .modal-body {
padding:24px 0 0;
flex:1;
display:flex;
flex-direction:column;
}
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline form, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline form {
flex:1;
display:flex;
flex-direction:column;
}
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .md-pane[data-md-pane="write"], html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .md-pane[data-md-pane="write"],
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .md-pane[data-md-pane="preview"], html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .md-pane[data-md-pane="preview"] {
flex:1;
}
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .md-editor, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .md-editor,
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .preview, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .preview {
min-height:58vh;
}
@media (max-width:900px){
html.kb-page-resource-feedback .reader.composer-mode .composer-inline, html.kb-page-resource-feedback.reader.composer-mode .composer-inline {padding:26px 18px 60px;}
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .md-editor, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .md-editor,
html.kb-page-resource-feedback .reader.composer-mode .composer-card-inline .preview, html.kb-page-resource-feedback.reader.composer-mode .composer-card-inline .preview {min-height:52vh;}
}
/* Extracted inline styles from resource/feedback.html */
html.kb-page-resource-feedback .kb-page-resource-feedback-inline-001 { min-height:220px }
/* ============================================================ resource/intro.html page scope: .kb-page-resource-intro ============================================================ */
html.kb-page-resource-intro {
--bg: #f5f5f7;
--paper: #ffffff;
--ink: #1d1d1f;
--muted: #6e6e73;
--line: rgba(0, 0, 0, 0.08);
--blue: #0071e3;
--green-a: #9bb688;
--green-b: #87a977;
--green-c: #608a64;
--vanilla-a: #40c50d;
--vanilla-b: #75b13c;
--stone: #aaa7a0;
--wood: #9a7d59;
--totem: #d7bd6a;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
--soft-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 48px rgba(0, 0, 0, 0.06);
}
html.kb-page-resource-intro * { box-sizing: border-box; }
html.kb-page-resource-intro { scroll-behavior: smooth; }
body.kb-page-resource-intro {
margin: 0;
font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "BlinkMacSystemFont", "Segoe UI", Roboto, sans-serif;
color: var(--ink);
background: var(--bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html.kb-page-resource-intro a { color: inherit; text-decoration: none; }
html.kb-page-resource-intro .nav, html.kb-page-resource-intro.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
height: 52px;
display: flex;
justify-content: center;
backdrop-filter: saturate(180%) blur(22px);
background: rgba(245, 245, 247, 0.78);
border-bottom: 1px solid var(--line);
}
html.kb-page-resource-intro .nav-inner, html.kb-page-resource-intro.nav-inner {
width: min(1160px, calc(100% - 36px));
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
html.kb-page-resource-intro .brand, html.kb-page-resource-intro.brand {
display: flex;
align-items: center;
gap: 9px;
font-weight: 590;
letter-spacing: -0.01em;
white-space: nowrap;
}
html.kb-page-resource-intro .brand-mark, html.kb-page-resource-intro.brand-mark {
width: 18px;
height: 18px;
border-radius: 5px;
background:
linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.28) 48% 52%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(255,255,255,0.28) 48% 52%, transparent 52%),
linear-gradient(135deg, #9bb688 0 50%, #7c634e 50% 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 4px 14px rgba(80, 120, 70, 0.22);
}
html.kb-page-resource-intro .nav-links, html.kb-page-resource-intro.nav-links {
display: flex;
align-items: center;
gap: 22px;
color: rgba(29, 29, 31, 0.72);
}
html.kb-page-resource-intro .nav-links a:hover, html.kb-page-resource-intro.nav-links a:hover { color: var(--ink); }
html.kb-page-resource-intro .nav-cta, html.kb-page-resource-intro.nav-cta {
padding: 5px 13px;
border-radius: 999px;
background: var(--blue);
color: #fff !important;
font-weight: 500;
}
html.kb-page-resource-intro main { padding-top: 52px; }
html.kb-page-resource-intro .section, html.kb-page-resource-intro.section {
padding: 96px 22px;
}
html.kb-page-resource-intro .section-dark, html.kb-page-resource-intro.section-dark {
background: #050505;
color: #f5f5f7;
}
html.kb-page-resource-intro .inner, html.kb-page-resource-intro.inner {
width: min(1160px, 100%);
margin: 0 auto;
}
html.kb-page-resource-intro .hero, html.kb-page-resource-intro.hero {
min-height: calc(100vh - 52px);
padding: 88px 22px 64px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 28% 20%, rgba(155, 182, 136, 0.26), transparent 30%),
radial-gradient(circle at 78% 18%, rgba(96, 138, 100, 0.2), transparent 28%),
linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 58%, #ececf0 100%);
}
html.kb-page-resource-intro .hero h1, html.kb-page-resource-intro.hero h1 {
max-width: 980px;
margin: 0 auto;
font-size: clamp(2.8rem, 8.8vw, 7.8rem);
line-height: 1.02;
letter-spacing: -0.025em;
font-weight: 620;
}
html.kb-page-resource-intro .eyebrow, html.kb-page-resource-intro.eyebrow {
margin: 0 0 14px;
color: var(--muted);
font-size: clamp(17px, 2vw, 24px);
line-height: 1.25;
font-weight: 500;
letter-spacing: -0.02em;
}
html.kb-page-resource-intro .hero-copy, html.kb-page-resource-intro.hero-copy {
max-width: 800px;
margin: 26px auto 0;
color: #3a3a3f;
font-size: clamp(1.2rem, 2.35vw, 1.9rem);
line-height: 1.32;
letter-spacing: -0.018em;
font-weight: 430;
}
html.kb-page-resource-intro .hero-note, html.kb-page-resource-intro.hero-note {
max-width: 720px;
margin: 16px auto 0;
color: var(--muted);
font-size: 1rem;
line-height: 1.6;
font-weight: 430;
}
html.kb-page-resource-intro .actions, html.kb-page-resource-intro.actions {
margin-top: 34px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
}
html.kb-page-resource-intro .button, html.kb-page-resource-intro.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 22px;
border-radius: 999px;
font-size: 17px;
line-height: 1;
font-weight: 520;
border: 1px solid transparent;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
html.kb-page-resource-intro .button:hover, html.kb-page-resource-intro.button:hover { transform: translateY(-1px); }
html.kb-page-resource-intro .button-primary, html.kb-page-resource-intro.button-primary {
background: var(--blue);
color: #fff;
}
html.kb-page-resource-intro .button-secondary, html.kb-page-resource-intro.button-secondary {
color: var(--blue);
background: rgba(255,255,255,0.72);
border-color: rgba(0,113,227,0.18);
backdrop-filter: blur(18px);
}
html.kb-page-resource-intro .device, html.kb-page-resource-intro.device {
width: min(980px, 100%);
margin: 58px auto 0;
padding: 16px;
border-radius: 46px;
background: linear-gradient(160deg, #29292d, #09090a);
box-shadow: 0 42px 120px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.1);
}
html.kb-page-resource-intro .screen, html.kb-page-resource-intro.screen {
min-height: clamp(430px, 58vw, 590px);
border-radius: 30px;
overflow: hidden;
position: relative;
background:
radial-gradient(circle at 70% 12%, rgba(255,255,255,0.54), transparent 12%),
linear-gradient(180deg, rgba(255,255,255,0.28), transparent 28%),
linear-gradient(135deg, #c7ddf0 0 18%, #b8d7e7 18% 30%, #9bb688 30% 52%, #87a977 52% 70%, #7d6b57 70% 84%, #504236 84% 100%);
}
html.kb-page-resource-intro .screen::before, html.kb-page-resource-intro.screen::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
background-size: 50px 50px;
opacity: 0.66;
}
html.kb-page-resource-intro .glass, html.kb-page-resource-intro.glass {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
display: grid;
grid-template-columns: 1.3fr 0.9fr;
gap: 18px;
}
html.kb-page-resource-intro .glass-card, html.kb-page-resource-intro.glass-card {
padding: 22px;
border-radius: 28px;
background: rgba(255,255,255,0.72);
backdrop-filter: blur(24px) saturate(160%);
box-shadow: 0 14px 44px rgba(0,0,0,0.12);
text-align: left;
}
html.kb-page-resource-intro .glass-card h3, html.kb-page-resource-intro.glass-card h3 {
margin: 0;
font-size: 25px;
line-height: 1.05;
letter-spacing: -0.045em;
}
html.kb-page-resource-intro .glass-card p, html.kb-page-resource-intro.glass-card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 1.56;
}
html.kb-page-resource-intro .chips, html.kb-page-resource-intro.chips {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
html.kb-page-resource-intro .chip, html.kb-page-resource-intro.chip {
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(0,0,0,0.06);
color: #454548;
font-size: 13px;
white-space: nowrap;
}
html.kb-page-resource-intro .title, html.kb-page-resource-intro.title {
margin: 0;
max-width: 980px;
font-size: clamp(2.2rem, 5.8vw, 4.6rem);
line-height: 1.08;
letter-spacing: -0.025em;
font-weight: 620;
}
html.kb-page-resource-intro .lead, html.kb-page-resource-intro.lead {
max-width: 820px;
margin: 20px 0 0;
color: var(--muted);
font-size: clamp(1.08rem, 2vw, 1.55rem);
line-height: 1.48;
letter-spacing: -0.012em;
font-weight: 430;
}
html.kb-page-resource-intro .section-dark .lead, html.kb-page-resource-intro.section-dark .lead { color: rgba(245,245,247,0.68); }
html.kb-page-resource-intro .grid, html.kb-page-resource-intro.grid {
margin-top: 44px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}
html.kb-page-resource-intro .card, html.kb-page-resource-intro.card {
position: relative;
min-height: 320px;
padding: 34px;
border-radius: 36px;
background: var(--paper);
box-shadow: var(--soft-shadow);
overflow: hidden;
}
html.kb-page-resource-intro .span-12, html.kb-page-resource-intro.span-12 { grid-column: span 12; }
html.kb-page-resource-intro .span-7, html.kb-page-resource-intro.span-7 { grid-column: span 7; }
html.kb-page-resource-intro .span-6, html.kb-page-resource-intro.span-6 { grid-column: span 6; }
html.kb-page-resource-intro .span-5, html.kb-page-resource-intro.span-5 { grid-column: span 5; }
html.kb-page-resource-intro .span-4, html.kb-page-resource-intro.span-4 { grid-column: span 4; }
html.kb-page-resource-intro .card h3, html.kb-page-resource-intro.card h3 {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.7rem);
line-height: 1.12;
letter-spacing: -0.025em;
}
html.kb-page-resource-intro .card p, html.kb-page-resource-intro.card p {
max-width: 540px;
margin: 13px 0 0;
color: var(--muted);
font-size: 18px;
line-height: 1.55;
}
html.kb-page-resource-intro .color-grid, html.kb-page-resource-intro.color-grid {
margin-top: 44px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
html.kb-page-resource-intro .color-card, html.kb-page-resource-intro.color-card {
border-radius: 30px;
background: #fff;
box-shadow: var(--soft-shadow);
overflow: hidden;
}
html.kb-page-resource-intro .swatch, html.kb-page-resource-intro.swatch {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
html.kb-page-resource-intro .swatch::after, html.kb-page-resource-intro.swatch::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 49.7%, rgba(255,255,255,0.22) 49.7% 50.3%, transparent 50.3%);
opacity: 0.7;
}
html.kb-page-resource-intro .koneko-grass, html.kb-page-resource-intro.koneko-grass { background: linear-gradient(135deg, #a0ba8c 0 50%, #f3f3f2 50% 100%); }
html.kb-page-resource-intro .koneko-foliage, html.kb-page-resource-intro.koneko-foliage { background: linear-gradient(135deg, #95ad83 0 50%, #5f8567 50% 100%); }
html.kb-page-resource-intro .vanilla-grass, html.kb-page-resource-intro.vanilla-grass { background: linear-gradient(135deg, #44c60d 0 50%, #f3f3f2 50% 100%); }
html.kb-page-resource-intro .vanilla-foliage, html.kb-page-resource-intro.vanilla-foliage { background: linear-gradient(135deg, #68ce37 0 50%, #56af69 50% 100%); }
html.kb-page-resource-intro .color-meta, html.kb-page-resource-intro.color-meta {
padding: 18px 18px 20px;
}
html.kb-page-resource-intro .color-meta strong, html.kb-page-resource-intro.color-meta strong {
display: block;
font-size: 18px;
letter-spacing: -0.03em;
}
html.kb-page-resource-intro .color-meta span, html.kb-page-resource-intro.color-meta span {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
html.kb-page-resource-intro .compare, html.kb-page-resource-intro.compare {
margin-top: 44px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
html.kb-page-resource-intro .pane, html.kb-page-resource-intro.pane {
min-height: 520px;
border-radius: 38px;
overflow: hidden;
position: relative;
box-shadow: var(--shadow);
}
html.kb-page-resource-intro .pane::before, html.kb-page-resource-intro.pane::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
background-size: 54px 54px;
opacity: 0.56;
}
html.kb-page-resource-intro .pane.vanilla, html.kb-page-resource-intro.pane.vanilla {
background:
linear-gradient(180deg, rgba(255,255,255,0.08), transparent 26%),
linear-gradient(135deg, #44c60d 0 22%, #75b13c 22% 45%, #8f6d45 45% 62%, #5c7f72 62% 100%);
}
html.kb-page-resource-intro .pane.koneko, html.kb-page-resource-intro.pane.koneko {
background:
linear-gradient(180deg, rgba(255,255,255,0.14), transparent 28%),
linear-gradient(135deg, #a0ba8c 0 22%, #8fb46d 22% 45%, #9d8b69 45% 62%, #6b8e73 62% 100%);
}
html.kb-page-resource-intro .pane-label, html.kb-page-resource-intro.pane-label {
position: absolute;
top: 22px;
left: 22px;
z-index: 2;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.78);
backdrop-filter: blur(18px);
color: #1d1d1f;
font-size: 14px;
font-weight: 520;
}
html.kb-page-resource-intro .pane-copy, html.kb-page-resource-intro.pane-copy {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
z-index: 2;
padding: 18px;
border-radius: 24px;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(18px);
}
html.kb-page-resource-intro .pane-copy strong, html.kb-page-resource-intro.pane-copy strong {
display: block;
font-size: 20px;
letter-spacing: -0.03em;
}
html.kb-page-resource-intro .pane-copy span, html.kb-page-resource-intro.pane-copy span {
display: block;
margin-top: 8px;
color: #5b5b60;
font-size: 14px;
line-height: 1.55;
}
html.kb-page-resource-intro .bars, html.kb-page-resource-intro.bars {
position: absolute;
left: 34px;
right: 34px;
bottom: 34px;
height: 86px;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 8px;
}
html.kb-page-resource-intro .bars span, html.kb-page-resource-intro.bars span {
border-radius: 18px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24), 0 10px 28px rgba(0,0,0,0.06);
}
html.kb-page-resource-intro .bars span:nth-child(1), html.kb-page-resource-intro.bars span:nth-child(1) { background: linear-gradient(180deg, #b5c36c, #a6b05e); }
html.kb-page-resource-intro .bars span:nth-child(2), html.kb-page-resource-intro.bars span:nth-child(2) { background: linear-gradient(180deg, #76aa42, #67a130); }
html.kb-page-resource-intro .bars span:nth-child(3), html.kb-page-resource-intro.bars span:nth-child(3) { background: linear-gradient(180deg, #7eb24d, #6aa844); }
html.kb-page-resource-intro .bars span:nth-child(4), html.kb-page-resource-intro.bars span:nth-child(4) { background: linear-gradient(180deg, #90b871, #81ae6c); }
html.kb-page-resource-intro .bars span:nth-child(5), html.kb-page-resource-intro.bars span:nth-child(5) { background: linear-gradient(180deg, #88a279, #70936d); }
html.kb-page-resource-intro .bars span:nth-child(6), html.kb-page-resource-intro.bars span:nth-child(6) { background: linear-gradient(180deg, #6d9166, #5c835f); }
html.kb-page-resource-intro .bars span:nth-child(7), html.kb-page-resource-intro.bars span:nth-child(7) { background: linear-gradient(180deg, #739d74, #5f8867); }
html.kb-page-resource-intro .bars span:nth-child(8), html.kb-page-resource-intro.bars span:nth-child(8) { background: linear-gradient(180deg, #5c8a67, #4a775a); }
html.kb-page-resource-intro .list, html.kb-page-resource-intro.list {
position: absolute;
left: 34px;
right: 34px;
bottom: 32px;
display: grid;
gap: 10px;
}
html.kb-page-resource-intro .list-item, html.kb-page-resource-intro.list-item {
display: flex;
align-items: center;
gap: 12px;
color: #404043;
font-size: 16px;
}
html.kb-page-resource-intro .dot, html.kb-page-resource-intro.dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(180deg, #6ca761, #5b9356);
flex: 0 0 auto;
}
html.kb-page-resource-intro .emoji-wall, html.kb-page-resource-intro.emoji-wall {
position: absolute;
right: 34px;
bottom: 34px;
display: grid;
grid-template-columns: repeat(5, 42px);
gap: 10px;
}
html.kb-page-resource-intro .emoji-wall span, html.kb-page-resource-intro.emoji-wall span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255,255,255,0.55), transparent),
#f0f0f3;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
font-size: 20px;
}
html.kb-page-resource-intro .totems, html.kb-page-resource-intro.totems {
position: absolute;
right: 34px;
bottom: 34px;
display: flex;
gap: 14px;
}
html.kb-page-resource-intro .totem, html.kb-page-resource-intro.totem {
position: relative;
width: 76px;
height: 110px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.26), transparent 22%),
linear-gradient(180deg, var(--top), var(--bottom));
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 14px 26px rgba(0,0,0,0.08);
}
html.kb-page-resource-intro .totem::before, html.kb-page-resource-intro.totem::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
top: 26px;
left: 18px;
border-radius: 999px;
background: rgba(59, 45, 24, 0.75);
box-shadow: 28px 0 0 rgba(59, 45, 24, 0.75);
}
html.kb-page-resource-intro .totem::after, html.kb-page-resource-intro.totem::after {
content: "";
position: absolute;
width: 38px;
height: 10px;
left: 19px;
top: 50px;
border-radius: 999px;
background: rgba(59, 45, 24, 0.65);
}
html.kb-page-resource-intro .museum, html.kb-page-resource-intro.museum {
margin-top: 44px;
min-height: 620px;
border-radius: 44px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 78% 18%, rgba(255,255,255,0.2), transparent 18%),
linear-gradient(180deg, rgba(255,255,255,0.12), transparent 24%),
linear-gradient(135deg, #d0c9bc 0 18%, #b6aa98 18% 32%, #8b7965 32% 56%, #6e6154 56% 78%, #554b43 78% 100%);
box-shadow: var(--shadow);
}
html.kb-page-resource-intro .museum::before, html.kb-page-resource-intro.museum::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 58px 58px;
opacity: 0.38;
}
html.kb-page-resource-intro .museum-card, html.kb-page-resource-intro.museum-card {
position: absolute;
left: 28px;
bottom: 28px;
z-index: 2;
width: min(570px, calc(100% - 56px));
padding: 24px;
border-radius: 28px;
background: rgba(255,255,255,0.8);
color: var(--ink);
backdrop-filter: blur(24px);
}
html.kb-page-resource-intro .museum-card h3, html.kb-page-resource-intro.museum-card h3 {
margin: 0;
font-size: clamp(1.85rem, 3vw, 2.7rem);
line-height: 1.12;
letter-spacing: -0.025em;
}
html.kb-page-resource-intro .museum-card p, html.kb-page-resource-intro.museum-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 16px;
line-height: 1.65;
}
html.kb-page-resource-intro .spec, html.kb-page-resource-intro.spec {
margin-top: 44px;
border-radius: 36px;
overflow: hidden;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
}
html.kb-page-resource-intro .spec-row, html.kb-page-resource-intro.spec-row {
display: grid;
grid-template-columns: 0.9fr 1.6fr;
gap: 20px;
padding: 24px 28px;
border-top: 1px solid rgba(255,255,255,0.08);
}
html.kb-page-resource-intro .spec-row:first-child, html.kb-page-resource-intro.spec-row:first-child { border-top: 0; }
html.kb-page-resource-intro .spec-row strong, html.kb-page-resource-intro.spec-row strong {
font-size: 18px;
letter-spacing: -0.025em;
}
html.kb-page-resource-intro .spec-row span, html.kb-page-resource-intro.spec-row span {
color: rgba(245,245,247,0.72);
line-height: 1.55;
}
html.kb-page-resource-intro .network-card, html.kb-page-resource-intro.network-card {
min-height: 360px;
background:
radial-gradient(circle at 82% 24%, rgba(0,113,227,0.15), transparent 24%),
#fff;
}
html.kb-page-resource-intro .metric, html.kb-page-resource-intro.metric {
position: absolute;
right: 34px;
bottom: 34px;
display: grid;
grid-template-columns: repeat(3, 120px);
gap: 12px;
}
html.kb-page-resource-intro .metric-box, html.kb-page-resource-intro.metric-box {
padding: 18px;
border-radius: 22px;
background: #f5f5f7;
}
html.kb-page-resource-intro .metric-box strong, html.kb-page-resource-intro.metric-box strong {
display: block;
font-size: 34px;
line-height: 1;
letter-spacing: -0.05em;
}
html.kb-page-resource-intro .metric-box span, html.kb-page-resource-intro.metric-box span {
display: block;
margin-top: 8px;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
html.kb-page-resource-intro .download-card, html.kb-page-resource-intro.download-card {
margin-top: 44px;
min-height: 600px;
border-radius: 46px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: clamp(30px, 5vw, 70px);
color: #fff;
background:
radial-gradient(circle at 82% 18%, rgba(155,182,136,0.55), transparent 24%),
radial-gradient(circle at 16% 18%, rgba(255,255,255,0.14), transparent 22%),
linear-gradient(160deg, #111113 0%, #1f1f22 52%, #29251d 100%);
box-shadow: var(--shadow);
}
html.kb-page-resource-intro .download-card::before, html.kb-page-resource-intro.download-card::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 62px 62px;
opacity: 0.28;
}
html.kb-page-resource-intro .download-content, html.kb-page-resource-intro.download-content {
position: relative;
z-index: 2;
max-width: 760px;
}
html.kb-page-resource-intro .download-content h2, html.kb-page-resource-intro.download-content h2 {
margin: 0;
font-size: clamp(2.4rem, 5.8vw, 5rem);
line-height: 1.04;
letter-spacing: -0.03em;
}
html.kb-page-resource-intro .download-content p, html.kb-page-resource-intro.download-content p {
margin: 20px 0 0;
color: rgba(255,255,255,0.74);
font-size: clamp(18px, 2vw, 26px);
line-height: 1.34;
letter-spacing: -0.03em;
font-weight: 500;
}
html.kb-page-resource-intro .download-actions, html.kb-page-resource-intro.download-actions {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
html.kb-page-resource-intro .download-actions .button-secondary, html.kb-page-resource-intro.download-actions .button-secondary {
color: #fff;
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.18);
}
html.kb-page-resource-intro .week-card, html.kb-page-resource-intro.week-card {
position: absolute;
top: clamp(24px, 4vw, 54px);
right: clamp(24px, 4vw, 54px);
z-index: 2;
width: min(300px, calc(100% - 48px));
padding: 22px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(24px) saturate(150%);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
color: #fff;
text-align: left;
}
html.kb-page-resource-intro .week-card-kicker, html.kb-page-resource-intro.week-card-kicker {
display: block;
color: rgba(255, 255, 255, 0.62);
font-size: 13px;
font-weight: 590;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 12px;
}
html.kb-page-resource-intro .week-card strong, html.kb-page-resource-intro.week-card strong {
display: block;
font-size: clamp(42px, 5vw, 64px);
line-height: 0.95;
letter-spacing: -0.06em;
font-weight: 620;
}
html.kb-page-resource-intro .week-card p, html.kb-page-resource-intro.week-card p {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 14px;
line-height: 1.5;
letter-spacing: 0;
font-weight: 450;
}
html.kb-page-resource-intro .week-card-code, html.kb-page-resource-intro.week-card-code {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px !important;
padding: 8px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.11);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.86) !important;
font-size: 13px !important;
white-space: nowrap;
}
html.kb-page-resource-intro .week-card-code span, html.kb-page-resource-intro.week-card-code span {
font-weight: 590;
color: #fff;
}
html.kb-page-resource-intro footer {
padding: 32px 22px 54px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
}
html.kb-page-resource-intro .footer-inner, html.kb-page-resource-intro.footer-inner {
width: min(1160px, 100%);
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
html.kb-page-resource-intro .site-footer, html.kb-page-resource-intro.site-footer {
padding: 30px 22px 48px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 12px;
background: rgba(245, 245, 247, 0.72);
}
html.kb-page-resource-intro .dark-theme .site-footer, html.kb-page-resource-intro.dark-theme .site-footer {
background: rgba(0, 0, 0, 0.72);
}
html.kb-page-resource-intro .footer-stack, html.kb-page-resource-intro.footer-stack {
display: grid;
gap: 22px;
}
html.kb-page-resource-intro .footer-note, html.kb-page-resource-intro.footer-note {
max-width: 860px;
line-height: 1.55;
color: var(--muted);
}
html.kb-page-resource-intro .footer-link-grid, html.kb-page-resource-intro.footer-link-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
align-items: start;
}
html.kb-page-resource-intro .footer-column strong, html.kb-page-resource-intro.footer-column strong {
display: block;
margin-bottom: 10px;
color: var(--ink);
font-size: 12px;
font-weight: 620;
letter-spacing: -0.01em;
}
html.kb-page-resource-intro .footer-column a, html.kb-page-resource-intro.footer-column a,
html.kb-page-resource-intro .footer-column span, html.kb-page-resource-intro.footer-column span {
display: block;
margin-top: 8px;
color: var(--muted);
line-height: 1.4;
}
html.kb-page-resource-intro .footer-column a:hover, html.kb-page-resource-intro.footer-column a:hover {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 3px;
}
html.kb-page-resource-intro .footer-bottom, html.kb-page-resource-intro.footer-bottom {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 18px;
border-top: 1px solid var(--line);
}
html.kb-page-resource-intro .reveal, html.kb-page-resource-intro.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms ease, transform 700ms ease;
}
html.kb-page-resource-intro .reveal.visible, html.kb-page-resource-intro.reveal.visible {
opacity: 1;
transform: translateY(0);
}
html.kb-page-resource-intro .theme-toggle, html.kb-page-resource-intro.theme-toggle {
width: 38px;
height: 30px;
padding: 0;
border: 0.5px solid var(--line);
border-radius: 999px;
background: rgba(0, 0, 0, 0.05);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
}
html.kb-page-resource-intro .theme-toggle:hover, html.kb-page-resource-intro.theme-toggle:hover {
background: rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
html.kb-page-resource-intro .theme-toggle svg, html.kb-page-resource-intro.theme-toggle svg {
width: 17px;
height: 17px;
display: block;
stroke: currentColor;
}
html.kb-page-resource-intro .theme-toggle .moon-icon, html.kb-page-resource-intro.theme-toggle .moon-icon { display: none; }
html.kb-page-resource-intro .dark-theme .theme-toggle .sun-icon, html.kb-page-resource-intro.dark-theme .theme-toggle .sun-icon { display: none; }
html.kb-page-resource-intro .dark-theme .theme-toggle .moon-icon, html.kb-page-resource-intro.dark-theme .theme-toggle .moon-icon { display: block; }
html.kb-page-resource-intro .dark-theme, html.kb-page-resource-intro.dark-theme {
color-scheme: dark;
--bg: #000000;
--paper: #1c1c1e;
--ink: #f5f5f7;
--muted: #a1a1a6;
--line: rgba(255, 255, 255, 0.14);
--blue: #0a84ff;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
--soft-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 48px rgba(0, 0, 0, 0.32);
}
body.kb-page-resource-intro,
html.kb-page-resource-intro .nav, html.kb-page-resource-intro.nav,
html.kb-page-resource-intro .hero, html.kb-page-resource-intro.hero,
html.kb-page-resource-intro .card, html.kb-page-resource-intro.card,
html.kb-page-resource-intro .color-card, html.kb-page-resource-intro.color-card,
html.kb-page-resource-intro .glass-card, html.kb-page-resource-intro.glass-card,
html.kb-page-resource-intro .museum-card, html.kb-page-resource-intro.museum-card,
html.kb-page-resource-intro .metric-box, html.kb-page-resource-intro.metric-box,
html.kb-page-resource-intro .theme-toggle, html.kb-page-resource-intro.theme-toggle {
transition: background-color 0.3s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
html.kb-page-resource-intro .dark-theme .nav, html.kb-page-resource-intro.dark-theme .nav {
background: rgba(0, 0, 0, 0.78);
border-bottom-color: var(--line);
}
html.kb-page-resource-intro .dark-theme .nav-links, html.kb-page-resource-intro.dark-theme .nav-links {
color: rgba(245, 245, 247, 0.72);
}
html.kb-page-resource-intro .dark-theme .nav-links a:hover, html.kb-page-resource-intro.dark-theme .nav-links a:hover {
color: var(--ink);
}
html.kb-page-resource-intro .dark-theme .theme-toggle, html.kb-page-resource-intro.dark-theme .theme-toggle {
background: rgba(255, 255, 255, 0.08);
color: var(--ink);
}
html.kb-page-resource-intro .dark-theme .theme-toggle:hover, html.kb-page-resource-intro.dark-theme .theme-toggle:hover {
background: rgba(255, 255, 255, 0.15);
}
html.kb-page-resource-intro .dark-theme .hero, html.kb-page-resource-intro.dark-theme .hero {
background:
radial-gradient(circle at 28% 20%, rgba(155, 182, 136, 0.14), transparent 30%),
radial-gradient(circle at 78% 18%, rgba(96, 138, 100, 0.12), transparent 28%),
linear-gradient(180deg, #000000 0%, #0b0b0d 58%, #121214 100%);
}
html.kb-page-resource-intro .dark-theme .hero-copy, html.kb-page-resource-intro.dark-theme .hero-copy {
color: #f5f5f7;
}
html.kb-page-resource-intro .dark-theme .hero-note, html.kb-page-resource-intro.dark-theme .hero-note {
color: var(--muted);
}
html.kb-page-resource-intro .dark-theme .button-secondary, html.kb-page-resource-intro.dark-theme .button-secondary {
color: var(--blue);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
}
html.kb-page-resource-intro .dark-theme .device, html.kb-page-resource-intro.dark-theme .device {
background: linear-gradient(160deg, #202024, #050506);
box-shadow: 0 42px 120px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html.kb-page-resource-intro .dark-theme .glass-card, html.kb-page-resource-intro.dark-theme .glass-card,
html.kb-page-resource-intro .dark-theme .museum-card, html.kb-page-resource-intro.dark-theme .museum-card {
background: rgba(28, 28, 30, 0.78);
color: var(--ink);
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.3);
}
html.kb-page-resource-intro .dark-theme .glass-card p, html.kb-page-resource-intro.dark-theme .glass-card p,
html.kb-page-resource-intro .dark-theme .museum-card p, html.kb-page-resource-intro.dark-theme .museum-card p,
html.kb-page-resource-intro .dark-theme .card p, html.kb-page-resource-intro.dark-theme .card p,
html.kb-page-resource-intro .dark-theme .color-meta span, html.kb-page-resource-intro.dark-theme .color-meta span,
html.kb-page-resource-intro .dark-theme .metric-box span, html.kb-page-resource-intro.dark-theme .metric-box span {
color: var(--muted);
}
html.kb-page-resource-intro .dark-theme .chip, html.kb-page-resource-intro.dark-theme .chip {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.1);
color: rgba(245, 245, 247, 0.82);
}
html.kb-page-resource-intro .dark-theme .color-card, html.kb-page-resource-intro.dark-theme .color-card {
background: #1c1c1e;
border: 1px solid rgba(255, 255, 255, 0.06);
}
html.kb-page-resource-intro .dark-theme .card, html.kb-page-resource-intro.dark-theme .card {
background: var(--paper);
border: 1px solid rgba(255, 255, 255, 0.06);
}
html.kb-page-resource-intro .dark-theme .pane-label, html.kb-page-resource-intro.dark-theme .pane-label,
html.kb-page-resource-intro .dark-theme .pane-copy, html.kb-page-resource-intro.dark-theme .pane-copy {
background: rgba(28, 28, 30, 0.82);
color: var(--ink);
}
html.kb-page-resource-intro .dark-theme .pane-copy span, html.kb-page-resource-intro.dark-theme .pane-copy span {
color: var(--muted);
}
html.kb-page-resource-intro .dark-theme .list-item, html.kb-page-resource-intro.dark-theme .list-item {
color: rgba(245, 245, 247, 0.82);
}
html.kb-page-resource-intro .dark-theme .emoji-wall span, html.kb-page-resource-intro.dark-theme .emoji-wall span {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent),
#2c2c2e;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html.kb-page-resource-intro .dark-theme .metric-box, html.kb-page-resource-intro.dark-theme .metric-box {
background: #2c2c2e;
}
html.kb-page-resource-intro .dark-theme .network-card, html.kb-page-resource-intro.dark-theme .network-card {
background:
radial-gradient(circle at 82% 24%, rgba(10, 132, 255, 0.18), transparent 24%),
#1c1c1e;
}
html.kb-page-resource-intro .dark-theme footer, html.kb-page-resource-intro.dark-theme footer {
border-top-color: var(--line);
}
html.kb-page-resource-intro .flow-grid, html.kb-page-resource-intro.flow-grid {
margin-top: 44px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
html.kb-page-resource-intro .flow-card, html.kb-page-resource-intro.flow-card {
min-height: 260px;
padding: 28px;
border-radius: 30px;
background: var(--paper);
box-shadow: var(--soft-shadow);
position: relative;
overflow: hidden;
}
html.kb-page-resource-intro .flow-card::after, html.kb-page-resource-intro.flow-card::after {
content: "";
position: absolute;
right: -46px;
bottom: -46px;
width: 130px;
height: 130px;
border-radius: 50%;
background: radial-gradient(circle, rgba(155, 182, 136, 0.32), transparent 68%);
}
html.kb-page-resource-intro .flow-number, html.kb-page-resource-intro.flow-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(0, 113, 227, 0.1);
color: var(--blue);
font-size: 14px;
font-weight: 620;
margin-bottom: 18px;
}
html.kb-page-resource-intro .flow-card h3, html.kb-page-resource-intro.flow-card h3 {
margin: 0;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.04em;
}
html.kb-page-resource-intro .flow-card p, html.kb-page-resource-intro.flow-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 16px;
line-height: 1.55;
}
html.kb-page-resource-intro .section-kicker, html.kb-page-resource-intro.section-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--muted);
font-size: 14px;
font-weight: 590;
letter-spacing: 0.16em;
text-transform: uppercase;
}
html.kb-page-resource-intro .section-kicker::before, html.kb-page-resource-intro.section-kicker::before {
content: "";
width: 34px;
height: 1px;
background: var(--line);
}
html.kb-page-resource-intro .summary-list, html.kb-page-resource-intro.summary-list {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
html.kb-page-resource-intro .summary-item, html.kb-page-resource-intro.summary-item {
padding: 18px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(0, 0, 0, 0.05);
text-align: left;
}
html.kb-page-resource-intro .summary-item strong, html.kb-page-resource-intro.summary-item strong {
display: block;
font-size: 17px;
letter-spacing: -0.03em;
}
html.kb-page-resource-intro .summary-item span, html.kb-page-resource-intro.summary-item span {
display: block;
margin-top: 7px;
color: var(--muted);
font-size: 14px;
line-height: 1.45;
}
html.kb-page-resource-intro .dark-theme .flow-card, html.kb-page-resource-intro.dark-theme .flow-card {
background: var(--paper);
border: 1px solid rgba(255, 255, 255, 0.06);
}
html.kb-page-resource-intro .dark-theme .summary-item, html.kb-page-resource-intro.dark-theme .summary-item {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.1);
}
html.kb-page-resource-intro .dark-theme .summary-item span, html.kb-page-resource-intro.dark-theme .summary-item span,
html.kb-page-resource-intro .dark-theme .flow-card p, html.kb-page-resource-intro.dark-theme .flow-card p {
color: var(--muted);
}
html.kb-page-resource-intro .feature-cluster, html.kb-page-resource-intro.feature-cluster {
margin-top: 44px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}
html.kb-page-resource-intro .feature-card, html.kb-page-resource-intro.feature-card {
grid-column: span 4;
min-height: 230px;
padding: 28px;
border-radius: 30px;
background: var(--paper);
box-shadow: var(--soft-shadow);
position: relative;
overflow: hidden;
}
html.kb-page-resource-intro .feature-card.large, html.kb-page-resource-intro.feature-card.large { grid-column: span 6; }
html.kb-page-resource-intro .feature-card.wide, html.kb-page-resource-intro.feature-card.wide { grid-column: span 12; }
html.kb-page-resource-intro .feature-card::after, html.kb-page-resource-intro.feature-card::after {
content: "";
position: absolute;
right: -52px;
bottom: -52px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(155, 182, 136, 0.26), transparent 70%);
pointer-events: none;
}
html.kb-page-resource-intro .feature-card h3, html.kb-page-resource-intro.feature-card h3 {
position: relative;
z-index: 1;
margin: 0;
font-size: clamp(1.45rem, 2.2vw, 2.15rem);
line-height: 1.12;
letter-spacing: -0.035em;
}
html.kb-page-resource-intro .feature-card p, html.kb-page-resource-intro.feature-card p {
position: relative;
z-index: 1;
margin: 12px 0 0;
color: var(--muted);
font-size: 16px;
line-height: 1.58;
}
html.kb-page-resource-intro .pill-list, html.kb-page-resource-intro.pill-list {
position: relative;
z-index: 1;
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
html.kb-page-resource-intro .pill, html.kb-page-resource-intro.pill {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(0, 113, 227, 0.08);
color: var(--blue);
font-size: 13px;
font-weight: 560;
line-height: 1.2;
}
html.kb-page-resource-intro .paper-strip, html.kb-page-resource-intro.paper-strip {
margin-top: 44px;
padding: 30px;
border-radius: 34px;
background: var(--paper);
box-shadow: var(--soft-shadow);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
html.kb-page-resource-intro .paper-strip .note, html.kb-page-resource-intro.paper-strip .note {
padding: 22px;
border-radius: 24px;
background: rgba(0, 0, 0, 0.035);
}
html.kb-page-resource-intro .paper-strip .note strong, html.kb-page-resource-intro.paper-strip .note strong {
display: block;
margin-bottom: 8px;
font-size: 18px;
letter-spacing: -0.025em;
}
html.kb-page-resource-intro .paper-strip .note span, html.kb-page-resource-intro.paper-strip .note span {
display: block;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
html.kb-page-resource-intro .naming-panel, html.kb-page-resource-intro.naming-panel {
margin-top: 44px;
padding: clamp(22px, 3vw, 34px);
border-radius: 36px;
background: var(--paper);
box-shadow: var(--soft-shadow);
}
html.kb-page-resource-intro .naming-tools, html.kb-page-resource-intro.naming-tools {
display: flex;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
html.kb-page-resource-intro .naming-tools p, html.kb-page-resource-intro.naming-tools p {
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.5;
}
html.kb-page-resource-intro .naming-search, html.kb-page-resource-intro.naming-search {
width: min(360px, 100%);
min-height: 42px;
padding: 0 15px;
border-radius: 999px;
border: 1px solid var(--line);
outline: none;
background: rgba(255, 255, 255, 0.72);
color: var(--ink);
font: inherit;
}
html.kb-page-resource-intro .naming-section, html.kb-page-resource-intro.naming-section {
border-top: 1px solid var(--line);
padding-top: 20px;
margin-top: 20px;
}
html.kb-page-resource-intro .naming-section:first-of-type, html.kb-page-resource-intro.naming-section:first-of-type {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
html.kb-page-resource-intro .naming-section h3, html.kb-page-resource-intro.naming-section h3 {
margin: 0 0 12px;
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.035em;
}
html.kb-page-resource-intro .naming-table, html.kb-page-resource-intro.naming-table {
display: grid;
gap: 8px;
}
html.kb-page-resource-intro .naming-row, html.kb-page-resource-intro.naming-row {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.035);
color: var(--ink);
line-height: 1.45;
}
html.kb-page-resource-intro .naming-row b, html.kb-page-resource-intro.naming-row b {
font-weight: 620;
}
html.kb-page-resource-intro .naming-row span, html.kb-page-resource-intro.naming-row span {
color: var(--muted);
}
html.kb-page-resource-intro .naming-empty, html.kb-page-resource-intro.naming-empty {
display: none;
color: var(--muted);
padding: 18px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.035);
}
html.kb-page-resource-intro .archive-note, html.kb-page-resource-intro.archive-note {
margin-top: 18px;
color: rgba(245,245,247,0.7);
font-size: 15px;
line-height: 1.6;
}
html.kb-page-resource-intro .dark-theme .feature-card, html.kb-page-resource-intro.dark-theme .feature-card,
html.kb-page-resource-intro .dark-theme .paper-strip, html.kb-page-resource-intro.dark-theme .paper-strip,
html.kb-page-resource-intro .dark-theme .naming-panel, html.kb-page-resource-intro.dark-theme .naming-panel {
background: var(--paper);
border: 1px solid rgba(255, 255, 255, 0.06);
}
html.kb-page-resource-intro .dark-theme .paper-strip .note, html.kb-page-resource-intro.dark-theme .paper-strip .note,
html.kb-page-resource-intro .dark-theme .naming-row, html.kb-page-resource-intro.dark-theme .naming-row,
html.kb-page-resource-intro .dark-theme .naming-empty, html.kb-page-resource-intro.dark-theme .naming-empty {
background: rgba(255, 255, 255, 0.07);
}
html.kb-page-resource-intro .dark-theme .naming-search, html.kb-page-resource-intro.dark-theme .naming-search {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
}
html.kb-page-resource-intro .fold-stack, html.kb-page-resource-intro.fold-stack {
margin-top: 44px;
display: grid;
gap: 18px;
}
html.kb-page-resource-intro .fold-card, html.kb-page-resource-intro.fold-card {
border-radius: 32px;
background: var(--paper);
box-shadow: var(--soft-shadow);
border: 1px solid rgba(0, 0, 0, 0.04);
overflow: hidden;
}
html.kb-page-resource-intro .fold-card summary, html.kb-page-resource-intro.fold-card summary {
list-style: none;
cursor: pointer;
padding: 26px 30px;
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
user-select: none;
}
html.kb-page-resource-intro .fold-card summary::-webkit-details-marker, html.kb-page-resource-intro.fold-card summary::-webkit-details-marker { display: none; }
html.kb-page-resource-intro .fold-summary-title, html.kb-page-resource-intro.fold-summary-title {
display: block;
font-size: clamp(1.55rem, 2.4vw, 2.35rem);
line-height: 1.12;
letter-spacing: -0.035em;
font-weight: 620;
}
html.kb-page-resource-intro .fold-summary-desc, html.kb-page-resource-intro.fold-summary-desc {
display: block;
margin-top: 9px;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
letter-spacing: 0;
font-weight: 430;
}
html.kb-page-resource-intro .fold-arrow, html.kb-page-resource-intro.fold-arrow {
width: 38px;
height: 38px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(0, 113, 227, 0.1);
color: var(--blue);
font-size: 22px;
line-height: 1;
transition: transform 180ms ease, background 180ms ease;
}
html.kb-page-resource-intro .fold-card[open] .fold-arrow, html.kb-page-resource-intro.fold-card[open] .fold-arrow { transform: rotate(45deg); }
html.kb-page-resource-intro .fold-content, html.kb-page-resource-intro.fold-content {
padding: 0 30px 30px;
}
html.kb-page-resource-intro .table-wrap, html.kb-page-resource-intro.table-wrap {
width: 100%;
overflow-x: auto;
border-radius: 24px;
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.025);
}
html.kb-page-resource-intro .data-table, html.kb-page-resource-intro.data-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
color: var(--ink);
font-size: 15px;
line-height: 1.48;
}
html.kb-page-resource-intro .data-table th, html.kb-page-resource-intro.data-table th,
html.kb-page-resource-intro .data-table td, html.kb-page-resource-intro.data-table td {
padding: 13px 15px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
html.kb-page-resource-intro .data-table th, html.kb-page-resource-intro.data-table th {
position: sticky;
top: 0;
z-index: 1;
background: rgba(245, 245, 247, 0.92);
color: var(--muted);
font-size: 13px;
font-weight: 620;
letter-spacing: 0.06em;
}
html.kb-page-resource-intro .data-table tr:last-child td, html.kb-page-resource-intro.data-table tr:last-child td { border-bottom: 0; }
html.kb-page-resource-intro .data-table td:first-child, html.kb-page-resource-intro.data-table td:first-child,
html.kb-page-resource-intro .data-table .nowrap, html.kb-page-resource-intro.data-table .nowrap {
white-space: nowrap;
}
html.kb-page-resource-intro .table-note-grid, html.kb-page-resource-intro.table-note-grid {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
html.kb-page-resource-intro .table-note, html.kb-page-resource-intro.table-note {
padding: 16px 18px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.035);
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
html.kb-page-resource-intro .table-note strong, html.kb-page-resource-intro.table-note strong {
display: block;
margin-bottom: 6px;
color: var(--ink);
font-size: 15px;
letter-spacing: -0.02em;
}
html.kb-page-resource-intro .tag-cell, html.kb-page-resource-intro.tag-cell {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(0, 113, 227, 0.09);
color: var(--blue);
font-size: 13px;
font-weight: 590;
white-space: nowrap;
}
html.kb-page-resource-intro .input-code, html.kb-page-resource-intro.input-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.95em;
word-break: keep-all;
}
html.kb-page-resource-intro .dark-theme .fold-card, html.kb-page-resource-intro.dark-theme .fold-card {
background: var(--paper);
border-color: rgba(255, 255, 255, 0.06);
}
html.kb-page-resource-intro .dark-theme .table-wrap, html.kb-page-resource-intro.dark-theme .table-wrap,
html.kb-page-resource-intro .dark-theme .table-note, html.kb-page-resource-intro.dark-theme .table-note {
background: rgba(255, 255, 255, 0.07);
}
html.kb-page-resource-intro .dark-theme .data-table th, html.kb-page-resource-intro.dark-theme .data-table th {
background: rgba(28, 28, 30, 0.94);
}
@media (max-width: 720px){
html.kb-page-resource-intro .fold-card summary, html.kb-page-resource-intro.fold-card summary { padding: 22px; }
html.kb-page-resource-intro .fold-content, html.kb-page-resource-intro.fold-content { padding: 0 22px 22px; }
html.kb-page-resource-intro .table-note-grid, html.kb-page-resource-intro.table-note-grid { grid-template-columns: 1fr; }
html.kb-page-resource-intro .data-table, html.kb-page-resource-intro.data-table { font-size: 14px; }
}
@media (max-width: 980px){
html.kb-page-resource-intro .grid, html.kb-page-resource-intro.grid { grid-template-columns: repeat(6, 1fr); }
html.kb-page-resource-intro .span-12, html.kb-page-resource-intro.span-12,
html.kb-page-resource-intro .span-7, html.kb-page-resource-intro.span-7,
html.kb-page-resource-intro .span-6, html.kb-page-resource-intro.span-6,
html.kb-page-resource-intro .span-5, html.kb-page-resource-intro.span-5,
html.kb-page-resource-intro .span-4, html.kb-page-resource-intro.span-4 { grid-column: span 6; }
html.kb-page-resource-intro .color-grid, html.kb-page-resource-intro.color-grid,
html.kb-page-resource-intro .compare, html.kb-page-resource-intro.compare { grid-template-columns: repeat(2, 1fr); }
html.kb-page-resource-intro .flow-grid, html.kb-page-resource-intro.flow-grid { grid-template-columns: repeat(2, 1fr); }
html.kb-page-resource-intro .summary-list, html.kb-page-resource-intro.summary-list { grid-template-columns: 1fr; }
html.kb-page-resource-intro .feature-card, html.kb-page-resource-intro.feature-card,
html.kb-page-resource-intro .feature-card.large, html.kb-page-resource-intro.feature-card.large,
html.kb-page-resource-intro .feature-card.wide, html.kb-page-resource-intro.feature-card.wide { grid-column: span 6; }
html.kb-page-resource-intro .paper-strip, html.kb-page-resource-intro.paper-strip { grid-template-columns: 1fr; }
html.kb-page-resource-intro .footer-link-grid, html.kb-page-resource-intro.footer-link-grid { grid-template-columns: repeat(2, 1fr); }
html.kb-page-resource-intro .glass, html.kb-page-resource-intro.glass { grid-template-columns: 1fr; }
html.kb-page-resource-intro .metric, html.kb-page-resource-intro.metric { position: static; margin-top: 26px; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
html.kb-page-resource-intro .nav-links a:not(.nav-cta):not(.nav-home), html.kb-page-resource-intro.nav-links a:not(.nav-cta):not(.nav-home) { display: none; }
html.kb-page-resource-intro .section, html.kb-page-resource-intro.section { padding: 76px 18px; }
html.kb-page-resource-intro .device, html.kb-page-resource-intro.device { padding: 12px; border-radius: 30px; }
html.kb-page-resource-intro .screen, html.kb-page-resource-intro.screen { border-radius: 20px; min-height: 540px; }
html.kb-page-resource-intro .glass, html.kb-page-resource-intro.glass { left: 16px; right: 16px; bottom: 16px; }
html.kb-page-resource-intro .card, html.kb-page-resource-intro.card { padding: 24px; min-height: 310px; }
html.kb-page-resource-intro .color-grid, html.kb-page-resource-intro.color-grid,
html.kb-page-resource-intro .compare, html.kb-page-resource-intro.compare { grid-template-columns: 1fr; }
html.kb-page-resource-intro .flow-grid, html.kb-page-resource-intro.flow-grid { grid-template-columns: 1fr; }
html.kb-page-resource-intro .spec-row, html.kb-page-resource-intro.spec-row { grid-template-columns: 1fr; gap: 8px; }
html.kb-page-resource-intro .bars, html.kb-page-resource-intro.bars,
html.kb-page-resource-intro .list, html.kb-page-resource-intro.list,
html.kb-page-resource-intro .emoji-wall, html.kb-page-resource-intro.emoji-wall,
html.kb-page-resource-intro .totems, html.kb-page-resource-intro.totems,
html.kb-page-resource-intro .metric, html.kb-page-resource-intro.metric { position: static; margin-top: 22px; }
html.kb-page-resource-intro .emoji-wall, html.kb-page-resource-intro.emoji-wall { grid-template-columns: repeat(5, 36px); }
html.kb-page-resource-intro .emoji-wall span, html.kb-page-resource-intro.emoji-wall span { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
html.kb-page-resource-intro .metric, html.kb-page-resource-intro.metric { grid-template-columns: 1fr; }
html.kb-page-resource-intro .footer-link-grid, html.kb-page-resource-intro.footer-link-grid { grid-template-columns: 1fr; }
html.kb-page-resource-intro .feature-cluster, html.kb-page-resource-intro.feature-cluster { grid-template-columns: 1fr; }
html.kb-page-resource-intro .feature-card, html.kb-page-resource-intro.feature-card,
html.kb-page-resource-intro .feature-card.large, html.kb-page-resource-intro.feature-card.large,
html.kb-page-resource-intro .feature-card.wide, html.kb-page-resource-intro.feature-card.wide { grid-column: span 1; }
html.kb-page-resource-intro .naming-row, html.kb-page-resource-intro.naming-row { grid-template-columns: 1fr; }
html.kb-page-resource-intro .week-card, html.kb-page-resource-intro.week-card {
position: relative;
top: auto;
right: auto;
width: 100%;
margin-bottom: 28px;
}
}
@media (prefers-reduced-motion: reduce){
html.kb-page-resource-intro { scroll-behavior: auto; }
html.kb-page-resource-intro .button, html.kb-page-resource-intro.button,
html.kb-page-resource-intro .reveal, html.kb-page-resource-intro.reveal { transition: none; }
}
/* 2026-06-03: admin entry for resourcepack intro page */
html.kb-page-resource-intro .rp-admin-entry, html.kb-page-resource-intro.rp-admin-entry {
display: none;
padding: 5px 13px;
border-radius: 999px;
background: rgba(0, 113, 227, 0.10);
color: var(--blue) !important;
font-weight: 560;
border: 1px solid rgba(0, 113, 227, 0.16);
}
html.kb-page-resource-intro .rp-admin .rp-admin-entry, html.kb-page-resource-intro.rp-admin .rp-admin-entry { display: inline-flex; }
html.kb-page-resource-intro .rp-admin-float, html.kb-page-resource-intro.rp-admin-float {
display: none;
position: fixed;
right: 18px;
bottom: 18px;
z-index: 70;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 11px 17px;
border-radius: 999px;
background: var(--blue);
color: #fff;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
font-size: 14px;
font-weight: 590;
letter-spacing: -0.01em;
}
html.kb-page-resource-intro .rp-admin .rp-admin-float, html.kb-page-resource-intro.rp-admin .rp-admin-float { display: inline-flex; }
html.kb-page-resource-intro .rp-admin-float:hover, html.kb-page-resource-intro.rp-admin-float:hover { transform: translateY(-1px); }
@media (max-width: 720px){
html.kb-page-resource-intro .rp-admin-entry, html.kb-page-resource-intro.rp-admin-entry { display: none !important; }
html.kb-page-resource-intro .rp-admin .rp-admin-float, html.kb-page-resource-intro.rp-admin .rp-admin-float { display: inline-flex; }
}
html.kb-page-resource-intro .museum-stage, html.kb-page-resource-intro.museum-stage {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
gap: 26px;
align-items: stretch;
margin-top: 34px;
}
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card,
html.kb-page-resource-intro .museum-info-card, html.kb-page-resource-intro.museum-info-card {
position: relative;
overflow: hidden;
border-radius: 34px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {
min-height: 560px;
isolation: isolate;
}
html.kb-page-resource-intro .museum-model-card::before, html.kb-page-resource-intro.museum-model-card::before {
content: "";
position: absolute;
inset: 18px;
border-radius: 26px;
background:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 28px 28px;
opacity: .42;
pointer-events: none;
z-index: 0;
}
html.kb-page-resource-intro .museum-model-card::after, html.kb-page-resource-intro.museum-model-card::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: 42px;
height: 20%;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 68%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
html.kb-page-resource-intro .museum-model-toolbar, html.kb-page-resource-intro.museum-model-toolbar {
position: absolute;
top: 22px;
left: 22px;
right: 22px;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
pointer-events: none;
}
html.kb-page-resource-intro .museum-model-title, html.kb-page-resource-intro.museum-model-title {
display: flex;
flex-direction: column;
gap: 5px;
pointer-events: auto;
}
html.kb-page-resource-intro .museum-model-title strong, html.kb-page-resource-intro.museum-model-title strong {
color: #fff;
font-size: 18px;
letter-spacing: -0.02em;
}
html.kb-page-resource-intro .museum-model-title span, html.kb-page-resource-intro.museum-model-title span {
color: rgba(245,245,247,.64);
font-size: 13px;
}
html.kb-page-resource-intro .museum-model-actions, html.kb-page-resource-intro.museum-model-actions {
display: flex;
gap: 8px;
pointer-events: auto;
}
html.kb-page-resource-intro .museum-model-actions button, html.kb-page-resource-intro.museum-model-actions button {
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.86);
border-radius: 999px;
padding: 8px 12px;
font: inherit;
font-size: 12px;
cursor: pointer;
backdrop-filter: blur(16px);
}
html.kb-page-resource-intro .museum-model-actions button:hover, html.kb-page-resource-intro.museum-model-actions button:hover { background: rgba(255,255,255,.18); }
html.kb-page-resource-intro #dsd-model-canvas {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
cursor: grab;
touch-action: none;
}
html.kb-page-resource-intro #dsd-model-canvas:active { cursor: grabbing; }
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {
position: absolute;
left: 22px;
bottom: 22px;
z-index: 3;
max-width: min(520px, calc(100% - 44px));
padding: 10px 13px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.13);
background: rgba(7, 9, 12, .54);
color: rgba(255,255,255,.72);
font-size: 12px;
line-height: 1.65;
backdrop-filter: blur(18px);
}
html.kb-page-resource-intro .museum-info-card, html.kb-page-resource-intro.museum-info-card {
padding: 34px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
}
html.kb-page-resource-intro .museum-info-card h3, html.kb-page-resource-intro.museum-info-card h3 {
margin: 0;
color: #fff;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1;
letter-spacing: -0.055em;
}
html.kb-page-resource-intro .museum-info-card p, html.kb-page-resource-intro.museum-info-card p {
margin: 18px 0 0;
color: rgba(245,245,247,.70);
font-size: 16px;
line-height: 1.8;
}
html.kb-page-resource-intro .museum-swatch-grid, html.kb-page-resource-intro.museum-swatch-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
html.kb-page-resource-intro .museum-swatch, html.kb-page-resource-intro.museum-swatch {
min-height: 78px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
background: var(--c);
box-shadow: inset 0 -18px 32px rgba(0,0,0,.12), inset 0 0 0 2px rgba(255,255,255,.08);
display: flex;
align-items: flex-end;
padding: 12px;
color: rgba(255,255,255,.88);
font-size: 12px;
font-weight: 650;
text-shadow: 0 1px 4px rgba(0,0,0,.28);
}
html.kb-page-resource-intro .museum-swatch.light, html.kb-page-resource-intro.museum-swatch.light { color: rgba(35,35,35,.82); text-shadow: none; }
html.kb-page-resource-intro .museum .chips, html.kb-page-resource-intro.museum .chips { margin-top: 22px; }
@media (max-width: 980px){
html.kb-page-resource-intro .museum-stage, html.kb-page-resource-intro.museum-stage { grid-template-columns: 1fr; }
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card { min-height: 500px; }
}
@media (max-width: 720px){
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card { min-height: 440px; border-radius: 26px; }
html.kb-page-resource-intro .museum-info-card, html.kb-page-resource-intro.museum-info-card { padding: 24px; border-radius: 26px; }
html.kb-page-resource-intro .museum-model-toolbar, html.kb-page-resource-intro.museum-model-toolbar { align-items: flex-start; flex-direction: column; }
html.kb-page-resource-intro .museum-model-actions, html.kb-page-resource-intro.museum-model-actions { width: 100%; }
html.kb-page-resource-intro .museum-model-actions button, html.kb-page-resource-intro.museum-model-actions button { flex: 1; }
html.kb-page-resource-intro .museum-swatch-grid, html.kb-page-resource-intro.museum-swatch-grid { grid-template-columns: 1fr; }
}
html.kb-page-resource-intro .museum-stage, html.kb-page-resource-intro.museum-stage {
display:block;
margin-top:34px;
}
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {
width:100%;
min-height:clamp(680px,82vh,980px);
border-radius:36px;
border:1px solid rgba(255,255,255,.16);
background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
box-shadow:0 30px 90px rgba(0,0,0,.34);
}
html.kb-page-resource-intro .museum-model-toolbar, html.kb-page-resource-intro.museum-model-toolbar,
html.kb-page-resource-intro .museum-info-card, html.kb-page-resource-intro.museum-info-card,
html.kb-page-resource-intro .museum-swatch-grid, html.kb-page-resource-intro.museum-swatch-grid,
html.kb-page-resource-intro .museum .chips, html.kb-page-resource-intro.museum .chips {
display:none!important;
}
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {
left:28px;
bottom:26px;
max-width:none;
padding:10px 15px;
border-radius:14px;
color:#fff;
font-size:18px;
line-height:1;
font-weight:760;
letter-spacing:.08em;
background:rgba(8,10,14,.46);
}
@media (max-width:720px){
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {min-height:620px;border-radius:28px;}
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {left:20px;bottom:20px;font-size:16px;}
}
html.kb-page-resource-intro .museum-model-card::after, html.kb-page-resource-intro.museum-model-card::after {display:none;}
html.kb-page-resource-intro .museum-model-image, html.kb-page-resource-intro.museum-model-image {
position:absolute;
inset:0;
z-index:1;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
padding:clamp(26px,4vw,56px);
box-sizing:border-box;
filter:drop-shadow(0 28px 38px rgba(0,0,0,.32));
}
html.kb-page-resource-intro .museum-stage, html.kb-page-resource-intro.museum-stage {display:block;margin-top:34px;}
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {
position:relative;
width:100%;
min-height:clamp(720px,82vh,980px);
border-radius:36px;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
background:
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)),
linear-gradient(145deg, #ece8df, #ddd8cf);
box-shadow:0 30px 90px rgba(0,0,0,.26);
isolation:isolate;
}
html.kb-page-resource-intro .museum-model-card::before, html.kb-page-resource-intro.museum-model-card::before {
content:"";
position:absolute;
inset:18px;
border-radius:28px;
background:
linear-gradient(rgba(95,95,95,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(95,95,95,.05) 1px, transparent 1px);
background-size:28px 28px;
opacity:.45;
pointer-events:none;
z-index:0;
}
html.kb-page-resource-intro .museum-model-card::after, html.kb-page-resource-intro.museum-model-card::after {display:none;}
html.kb-page-resource-intro .museum-model-toolbar, html.kb-page-resource-intro.museum-model-toolbar,
html.kb-page-resource-intro .museum-info-card, html.kb-page-resource-intro.museum-info-card,
html.kb-page-resource-intro .museum-swatch-grid, html.kb-page-resource-intro.museum-swatch-grid,
html.kb-page-resource-intro .museum .chips, html.kb-page-resource-intro.museum .chips {display:none!important;}
html.kb-page-resource-intro .museum-turntable, html.kb-page-resource-intro.museum-turntable {
position:absolute;
inset:0;
z-index:1;
cursor:grab;
user-select:none;
-webkit-user-select:none;
touch-action:none;
}
html.kb-page-resource-intro .museum-turntable.is-dragging, html.kb-page-resource-intro.museum-turntable.is-dragging {cursor:grabbing;}
html.kb-page-resource-intro .museum-model-image, html.kb-page-resource-intro.museum-model-image {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
padding:clamp(24px,3.8vw,54px);
box-sizing:border-box;
filter:none;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
}
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {
position:absolute;
left:28px;
bottom:26px;
z-index:3;
max-width:none;
padding:10px 15px;
border-radius:14px;
border:1px solid rgba(255,255,255,.18);
background:rgba(14,16,20,.34);
color:#fff;
font-size:18px;
line-height:1;
font-weight:760;
letter-spacing:.08em;
backdrop-filter:blur(12px);
}
@media (max-width:720px){
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {min-height:620px;border-radius:28px;}
html.kb-page-resource-intro .museum-model-card::before, html.kb-page-resource-intro.museum-model-card::before {inset:14px;border-radius:22px;}
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {left:20px;bottom:20px;font-size:16px;}
}
/* dsd-depth-outline-viewer */
html.kb-page-resource-intro .museum-stage, html.kb-page-resource-intro.museum-stage {display:block;margin-top:34px;}
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {
position:relative;
width:100%;
min-height:clamp(720px,82vh,980px);
border-radius:36px;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
background:
radial-gradient(circle at 50% 38%, rgba(255,255,255,.72), rgba(255,255,255,.52) 28%, rgba(225,220,212,.92) 72%, rgba(214,209,201,.98) 100%),
linear-gradient(145deg, #ece8df, #ddd8cf);
box-shadow:0 30px 90px rgba(0,0,0,.22);
isolation:isolate;
}
html.kb-page-resource-intro .museum-model-card::before, html.kb-page-resource-intro.museum-model-card::before {
content:"";
position:absolute;
inset:18px;
border-radius:28px;
background:
linear-gradient(rgba(95,95,95,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(95,95,95,.028) 1px, transparent 1px);
background-size:28px 28px;
opacity:.32;
pointer-events:none;
z-index:0;
}
html.kb-page-resource-intro .museum-model-card::after, html.kb-page-resource-intro.museum-model-card::after {display:none;}
html.kb-page-resource-intro .museum-model-toolbar, html.kb-page-resource-intro.museum-model-toolbar,
html.kb-page-resource-intro .museum-info-card, html.kb-page-resource-intro.museum-info-card,
html.kb-page-resource-intro .museum-swatch-grid, html.kb-page-resource-intro.museum-swatch-grid,
html.kb-page-resource-intro .museum .chips, html.kb-page-resource-intro.museum .chips {display:none!important;}
html.kb-page-resource-intro .museum-viewer, html.kb-page-resource-intro.museum-viewer {position:absolute;inset:0;z-index:1;}
html.kb-page-resource-intro #dsd-model-canvas {position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;}
html.kb-page-resource-intro #dsd-model-canvas:active {cursor:grabbing;}
html.kb-page-resource-intro .museum-model-fallback, html.kb-page-resource-intro.museum-model-fallback {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:clamp(24px,3.8vw,54px);box-sizing:border-box;filter:none;user-select:none;-webkit-user-drag:none;pointer-events:none;opacity:0;transition:opacity .28s ease;}
html.kb-page-resource-intro .museum-viewer.is-fallback .museum-model-fallback, html.kb-page-resource-intro.museum-viewer.is-fallback .museum-model-fallback {opacity:1;}
html.kb-page-resource-intro .museum-viewer.is-fallback #dsd-model-canvas, html.kb-page-resource-intro.museum-viewer.is-fallback #dsd-model-canvas {opacity:0;}
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {position:absolute;left:28px;bottom:26px;z-index:3;max-width:none;padding:10px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(14,16,20,.28);color:#fff;font-size:18px;line-height:1;font-weight:760;letter-spacing:.08em;backdrop-filter:blur(12px);}
@media (max-width:720px){html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {min-height:620px;border-radius:28px;}html.kb-page-resource-intro .museum-model-card::before, html.kb-page-resource-intro.museum-model-card::before {inset:14px;border-radius:22px;}html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {left:20px;bottom:20px;font-size:16px;}}
html.kb-page-resource-intro .museum-stage, html.kb-page-resource-intro.museum-stage {display:block;margin-top:34px;}
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {
position:relative;
width:100%;
min-height:clamp(720px,82vh,980px);
border-radius:36px;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
background:
radial-gradient(circle at 50% 38%, rgba(255,255,255,.74), rgba(255,255,255,.54) 28%, rgba(225,220,212,.92) 72%, rgba(214,209,201,.98) 100%),
linear-gradient(145deg, #ece8df, #ddd8cf);
box-shadow:0 30px 90px rgba(0,0,0,.22);
isolation:isolate;
}
html.kb-page-resource-intro .museum-model-card::before, html.kb-page-resource-intro.museum-model-card::before {
content:"";
position:absolute;
inset:18px;
border-radius:28px;
background:
linear-gradient(rgba(95,95,95,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(95,95,95,.028) 1px, transparent 1px);
background-size:28px 28px;
opacity:.3;
pointer-events:none;
z-index:0;
}
html.kb-page-resource-intro .museum-model-card::after, html.kb-page-resource-intro.museum-model-card::after {display:none;}
html.kb-page-resource-intro .museum-model-toolbar, html.kb-page-resource-intro.museum-model-toolbar,
html.kb-page-resource-intro .museum-info-card, html.kb-page-resource-intro.museum-info-card,
html.kb-page-resource-intro .museum-swatch-grid, html.kb-page-resource-intro.museum-swatch-grid,
html.kb-page-resource-intro .museum .chips, html.kb-page-resource-intro.museum .chips {display:none!important;}
html.kb-page-resource-intro .museum-viewer, html.kb-page-resource-intro.museum-viewer {
position:absolute;
inset:0;
z-index:1;
}
html.kb-page-resource-intro #dsd-model-canvas {
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
cursor:grab;
touch-action:none;
}
html.kb-page-resource-intro #dsd-model-canvas:active {cursor:grabbing;}
html.kb-page-resource-intro .museum-model-fallback, html.kb-page-resource-intro.museum-model-fallback {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
padding:clamp(24px,3.8vw,54px);
box-sizing:border-box;
filter:none;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
opacity:0;
transition:opacity .28s ease;
}
html.kb-page-resource-intro .museum-viewer.is-fallback .museum-model-fallback, html.kb-page-resource-intro.museum-viewer.is-fallback .museum-model-fallback {opacity:1;}
html.kb-page-resource-intro .museum-viewer.is-fallback #dsd-model-canvas, html.kb-page-resource-intro.museum-viewer.is-fallback #dsd-model-canvas {opacity:0;}
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {
position:absolute;
left:28px;
bottom:26px;
z-index:3;
max-width:none;
padding:10px 15px;
border-radius:14px;
border:1px solid rgba(255,255,255,.18);
background:rgba(14,16,20,.28);
color:#fff;
font-size:18px;
line-height:1;
font-weight:760;
letter-spacing:.08em;
backdrop-filter:blur(12px);
}
@media (max-width:720px){
html.kb-page-resource-intro .museum-model-card, html.kb-page-resource-intro.museum-model-card {min-height:620px;border-radius:28px;}
html.kb-page-resource-intro .museum-model-card::before, html.kb-page-resource-intro.museum-model-card::before {inset:14px;border-radius:22px;}
html.kb-page-resource-intro .museum-model-status, html.kb-page-resource-intro.museum-model-status {left:20px;bottom:20px;font-size:16px;}
}
/* Extracted inline styles from resource/intro.html */
html.kb-page-resource-intro .kb-page-resource-intro-inline-001 { --top:#efd88f;--bottom:#9c7e46 }
html.kb-page-resource-intro .kb-page-resource-intro-inline-002 { --top:#d9c6f1;--bottom:#8960b4 }
html.kb-page-resource-intro .kb-page-resource-intro-inline-003 { --top:#ffd6cf;--bottom:#c67c64 }
/* ============================================================ resource/intro_admin.html page scope: .kb-page-resource-intro-admin ============================================================ */
html.kb-page-resource-intro-admin {--bg:#f5f5f7;--panel:#fff;--panel-2:#fbfbfd;--ink:#1d1d1f;--muted:#6e6e73;--line:rgba(0,0,0,.09);--blue:#0071e3;--red:#b93a31;--green:#5f8d68;--chip:rgba(0,0,0,.045);--hover:rgba(0,0,0,.055);--shadow:0 18px 48px rgba(0,0,0,.08)}
html.kb-page-resource-intro-admin .dark-theme, html.kb-page-resource-intro-admin.dark-theme {color-scheme:dark;--bg:#000;--panel:#1c1c1e;--panel-2:#161617;--ink:#f5f5f7;--muted:#a1a1a6;--line:rgba(255,255,255,.14);--blue:#0a84ff;--red:#ff6961;--green:#7fbf86;--chip:rgba(255,255,255,.08);--hover:rgba(255,255,255,.09);--shadow:0 18px 48px rgba(0,0,0,.42)}
html.kb-page-resource-intro-admin * {box-sizing:border-box}body.kb-page-resource-intro-admin {margin:0;font-family:-apple-system,"SF Pro Text","SF Pro Display","Helvetica Neue","BlinkMacSystemFont","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}html.kb-page-resource-intro-admin a {color:inherit;text-decoration:none}html.kb-page-resource-intro-admin button,
html.kb-page-resource-intro-admin input,
html.kb-page-resource-intro-admin textarea {font:inherit;color:inherit}html.kb-page-resource-intro-admin .nav, html.kb-page-resource-intro-admin.nav {position:sticky;top:0;z-index:5;height:54px;display:flex;justify-content:center;border-bottom:1px solid var(--line);background:rgba(245,245,247,.78);backdrop-filter:saturate(180%) blur(22px)}html.kb-page-resource-intro-admin .dark-theme .nav, html.kb-page-resource-intro-admin.dark-theme .nav {background:rgba(0,0,0,.78)}html.kb-page-resource-intro-admin .nav-inner, html.kb-page-resource-intro-admin.nav-inner {width:min(1180px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:14px}html.kb-page-resource-intro-admin .brand, html.kb-page-resource-intro-admin.brand {font-weight:650;letter-spacing:-.02em}html.kb-page-resource-intro-admin .nav-links, html.kb-page-resource-intro-admin.nav-links {display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}html.kb-page-resource-intro-admin .nav-links a:hover, html.kb-page-resource-intro-admin.nav-links a:hover {color:var(--blue)}html.kb-page-resource-intro-admin main {width:min(1180px,calc(100% - 32px));margin:0 auto;padding:34px 0 70px}html.kb-page-resource-intro-admin .hero, html.kb-page-resource-intro-admin.hero {display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}html.kb-page-resource-intro-admin .card, html.kb-page-resource-intro-admin.card {background:var(--panel);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);padding:26px}html.kb-page-resource-intro-admin .hero h1, html.kb-page-resource-intro-admin.hero h1 {margin:0;font-size:clamp(2.1rem,4.8vw,4.8rem);line-height:1.05;letter-spacing:-.045em}html.kb-page-resource-intro-admin .lead, html.kb-page-resource-intro-admin.lead {margin:16px 0 0;color:var(--muted);font-size:18px;line-height:1.55}html.kb-page-resource-intro-admin .status, html.kb-page-resource-intro-admin.status {min-height:22px;margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.5}html.kb-page-resource-intro-admin .status.ok, html.kb-page-resource-intro-admin.status.ok {color:var(--green)}html.kb-page-resource-intro-admin .status.error, html.kb-page-resource-intro-admin.status.error {color:var(--red)}html.kb-page-resource-intro-admin .grid, html.kb-page-resource-intro-admin.grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}html.kb-page-resource-intro-admin .field, html.kb-page-resource-intro-admin.field {display:grid;gap:8px}html.kb-page-resource-intro-admin .field label, html.kb-page-resource-intro-admin.field label {font-size:13px;font-weight:650;color:var(--muted)}html.kb-page-resource-intro-admin .input, html.kb-page-resource-intro-admin.input,
html.kb-page-resource-intro-admin .textarea, html.kb-page-resource-intro-admin.textarea {width:100%;border:1px solid var(--line);border-radius:16px;background:var(--panel-2);outline:none;padding:12px 13px}html.kb-page-resource-intro-admin .input, html.kb-page-resource-intro-admin.input {min-height:42px}html.kb-page-resource-intro-admin .textarea, html.kb-page-resource-intro-admin.textarea {min-height:180px;resize:vertical;line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:13px}html.kb-page-resource-intro-admin .textarea.large, html.kb-page-resource-intro-admin.textarea.large {min-height:340px}html.kb-page-resource-intro-admin .actions, html.kb-page-resource-intro-admin.actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}html.kb-page-resource-intro-admin .button, html.kb-page-resource-intro-admin.button {border:1px solid var(--line);background:var(--chip);border-radius:999px;min-height:38px;padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:650;cursor:pointer}html.kb-page-resource-intro-admin .button:hover, html.kb-page-resource-intro-admin.button:hover {background:var(--hover)}html.kb-page-resource-intro-admin .button.primary, html.kb-page-resource-intro-admin.button.primary {border-color:transparent;background:var(--blue);color:white}html.kb-page-resource-intro-admin .button.danger, html.kb-page-resource-intro-admin.button.danger {color:var(--red)}html.kb-page-resource-intro-admin .tabs, html.kb-page-resource-intro-admin.tabs {display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 14px}html.kb-page-resource-intro-admin .tab, html.kb-page-resource-intro-admin.tab {border:0;border-radius:999px;background:var(--chip);color:var(--muted);padding:9px 13px;font-size:13px;font-weight:650;cursor:pointer}html.kb-page-resource-intro-admin .tab.active, html.kb-page-resource-intro-admin.tab.active {background:rgba(0,113,227,.13);color:var(--blue)}html.kb-page-resource-intro-admin .panel, html.kb-page-resource-intro-admin.panel {display:none}html.kb-page-resource-intro-admin .panel.active, html.kb-page-resource-intro-admin.panel.active {display:grid;gap:14px}html.kb-page-resource-intro-admin .help, html.kb-page-resource-intro-admin.help {padding:14px 16px;border-radius:20px;background:var(--chip);color:var(--muted);font-size:13px;line-height:1.55}html.kb-page-resource-intro-admin .preview, html.kb-page-resource-intro-admin.preview {margin-top:14px;border:1px solid var(--line);border-radius:22px;overflow:auto;max-height:430px;background:var(--panel-2)}html.kb-page-resource-intro-admin table {width:100%;min-width:760px;border-collapse:collapse;font-size:13px}html.kb-page-resource-intro-admin th,
html.kb-page-resource-intro-admin td {padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}html.kb-page-resource-intro-admin th {color:var(--muted);font-weight:650;background:var(--panel)}html.kb-page-resource-intro-admin .mono, html.kb-page-resource-intro-admin.mono {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}html.kb-page-resource-intro-admin .hide, html.kb-page-resource-intro-admin.hide {display:none!important}@media (max-width:860px){html.kb-page-resource-intro-admin .hero, html.kb-page-resource-intro-admin.hero,
html.kb-page-resource-intro-admin .grid, html.kb-page-resource-intro-admin.grid {grid-template-columns:1fr}html.kb-page-resource-intro-admin .card, html.kb-page-resource-intro-admin.card {padding:20px}html.kb-page-resource-intro-admin .nav-links, html.kb-page-resource-intro-admin.nav-links {gap:9px}html.kb-page-resource-intro-admin .textarea.large, html.kb-page-resource-intro-admin.textarea.large {min-height:260px}}
/* Extracted inline styles from resource/intro_admin.html */
html.kb-page-resource-intro-admin .kb-page-resource-intro-admin-inline-001 { margin:0 0 14px;letter-spacing:-.03em }
html.kb-page-resource-intro-admin .kb-page-resource-intro-admin-inline-002 { margin-top:12px }
html.kb-page-resource-intro-admin .kb-page-resource-intro-admin-inline-003 { margin-top:18px }
/* ============================================================ resource/staff_portal.html page scope: .kb-page-resource-staff-portal ============================================================ */
html.kb-page-resource-staff-portal { color-scheme: light dark; }
body.kb-page-resource-staff-portal { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f5f7; color: #1d1d1f; }
html.kb-page-resource-staff-portal .card, html.kb-page-resource-staff-portal.card { width: min(520px, calc(100% - 36px)); padding: 28px; border-radius: 28px; background: #fff; box-shadow: 0 18px 48px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.08); }
html.kb-page-resource-staff-portal h1 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.03em; }
html.kb-page-resource-staff-portal p { margin: 0; color: #6e6e73; line-height: 1.6; }
html.kb-page-resource-staff-portal a { color: #0071e3; text-decoration: none; }
@media (prefers-color-scheme: dark){ body.kb-page-resource-staff-portal { background: #000; color: #f5f5f7; } html.kb-page-resource-staff-portal .card, html.kb-page-resource-staff-portal.card { background: #1c1c1e; border-color: rgba(255,255,255,.14); } html.kb-page-resource-staff-portal p { color: #a1a1a6; } html.kb-page-resource-staff-portal a { color: #0a84ff; } }
/* ============================================================ resource/tellraw.html page scope: .kb-page-resource-tellraw ============================================================ */
@font-face{
font-family: "KonekoMinecraft";
src: url("./Minecraft.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
html.kb-page-resource-tellraw * { box-sizing: border-box; margin: 0; padding: 0; }
html.kb-page-resource-tellraw {
--bg-primary: #f5f5f7;
--bg-secondary: #ffffff;
--card-bg: #fbfbfd;
--card-elevated: rgba(255,255,255,0.72);
--text-primary: #1d1d1f;
--text-secondary: #6e6e73;
--border-light: rgba(0, 0, 0, 0.08);
--border-card: rgba(0, 0, 0, 0.08);
--shadow: rgba(0, 0, 0, 0.055);
--link-color: #0071e3;
--button-bg: #f5f5f7;
--button-hover: #ececf0;
--input-bg: rgba(255,255,255,0.88);
--code-bg: #111318;
--code-text: #f5f5f7;
--success: #34c759;
--danger: #ff453a;
--warning: #ff9f0a;
--neutral: #8e8e93;
--chat-line-px: 682px;
--chat-font-size: 16px;
--chat-line-height: 20px;
--mc-font: "KonekoMinecraft", "Minecraft", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html.kb-page-resource-tellraw .dark-theme, html.kb-page-resource-tellraw.dark-theme {
--bg-primary: #000000;
--bg-secondary: #161617;
--card-bg: #1d1d1f;
--card-elevated: rgba(29,29,31,0.76);
--text-primary: #f5f5f7;
--text-secondary: #a1a1a6;
--border-light: rgba(255, 255, 255, 0.14);
--border-card: rgba(255, 255, 255, 0.14);
--shadow: rgba(0, 0, 0, 0.45);
--link-color: #2997ff;
--button-bg: #2c2c2e;
--button-hover: #3a3a3c;
--input-bg: rgba(44,44,46,0.78);
--code-bg: #050507;
--code-text: #f5f5f7;
--success: #30d158;
--danger: #ff453a;
--warning: #ffd60a;
--neutral: #8e8e93;
}
html.kb-page-resource-tellraw { color-scheme: light; }
html.kb-page-resource-tellraw.dark-theme { color-scheme: dark; }
body.kb-page-resource-tellraw {
min-height: 100vh;
background: var(--bg-primary);
font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "BlinkMacSystemFont", "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--text-primary);
padding: 24px;
transition: background-color 0.3s ease, color 0.2s ease;
}
html.kb-page-resource-tellraw a { color: inherit; text-decoration: none; }
html.kb-page-resource-tellraw .theme-toggle, html.kb-page-resource-tellraw.theme-toggle,
html.kb-page-resource-tellraw .home-link, html.kb-page-resource-tellraw.home-link {
position: fixed;
top: 20px;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--button-bg);
border: 0.5px solid var(--border-light);
color: var(--text-secondary);
z-index: 100;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
html.kb-page-resource-tellraw .home-link, html.kb-page-resource-tellraw.home-link {
right: 74px;
padding: 8px 14px;
font-size: 13px;
font-weight: 510;
line-height: 1;
}
html.kb-page-resource-tellraw .home-link:hover, html.kb-page-resource-tellraw.home-link:hover {
background: var(--button-hover);
color: var(--link-color);
border-color: var(--border-card);
}
html.kb-page-resource-tellraw .theme-toggle, html.kb-page-resource-tellraw.theme-toggle {
right: 20px;
padding: 8px 12px;
cursor: pointer;
color: var(--text-primary);
}
html.kb-page-resource-tellraw .theme-toggle:hover, html.kb-page-resource-tellraw.theme-toggle:hover { background: var(--button-hover); }
html.kb-page-resource-tellraw .theme-toggle .moon-icon, html.kb-page-resource-tellraw.theme-toggle .moon-icon { display: none; }
html.kb-page-resource-tellraw .dark-theme .theme-toggle .sun-icon, html.kb-page-resource-tellraw.dark-theme .theme-toggle .sun-icon { display: none; }
html.kb-page-resource-tellraw .dark-theme .theme-toggle .moon-icon, html.kb-page-resource-tellraw.dark-theme .theme-toggle .moon-icon { display: block; }
html.kb-page-resource-tellraw .shell, html.kb-page-resource-tellraw.shell {
width: min(1280px, 100%);
margin: 72px auto 32px;
}
html.kb-page-resource-tellraw .hero, html.kb-page-resource-tellraw.hero {
background: var(--bg-secondary);
border: 0.5px solid var(--border-card);
box-shadow: 0 18px 48px var(--shadow);
border-radius: 34px;
padding: 48px 40px;
overflow: hidden;
position: relative;
}
html.kb-page-resource-tellraw .hero::after, html.kb-page-resource-tellraw.hero::after { display: none; }
html.kb-page-resource-tellraw .eyebrow, html.kb-page-resource-tellraw.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 20px;
}
html.kb-page-resource-tellraw .eyebrow::before, html.kb-page-resource-tellraw.eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--border-light);
display: inline-block;
}
html.kb-page-resource-tellraw h1 {
font-size: clamp(2.35rem, 5vw, 4.8rem);
line-height: 1.04;
letter-spacing: -0.045em;
font-weight: 650;
color: var(--text-primary);
margin-bottom: 18px;
max-width: 900px;
}
html.kb-page-resource-tellraw .sub, html.kb-page-resource-tellraw.sub {
max-width: 760px;
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.7;
font-weight: 430;
}
html.kb-page-resource-tellraw .layout, html.kb-page-resource-tellraw.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr);
gap: 22px;
margin-top: 22px;
align-items: start;
}
html.kb-page-resource-tellraw .panel, html.kb-page-resource-tellraw.panel {
background: var(--bg-secondary);
border: 0.5px solid var(--border-card);
border-radius: 28px;
box-shadow: 0 12px 36px var(--shadow);
padding: 24px;
min-width: 0;
}
html.kb-page-resource-tellraw .panel-title, html.kb-page-resource-tellraw.panel-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
html.kb-page-resource-tellraw .panel-title h2, html.kb-page-resource-tellraw.panel-title h2 {
font-size: 1.16rem;
letter-spacing: -0.02em;
font-weight: 620;
}
html.kb-page-resource-tellraw .panel-title p, html.kb-page-resource-tellraw.panel-title p {
color: var(--text-secondary);
font-size: 0.88rem;
line-height: 1.55;
margin-top: 6px;
}
html.kb-page-resource-tellraw .grid, html.kb-page-resource-tellraw.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
html.kb-page-resource-tellraw .field, html.kb-page-resource-tellraw.field {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
html.kb-page-resource-tellraw label,
html.kb-page-resource-tellraw .label, html.kb-page-resource-tellraw.label {
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 540;
letter-spacing: 0.02em;
}
html.kb-page-resource-tellraw input,
html.kb-page-resource-tellraw select,
html.kb-page-resource-tellraw textarea {
width: 100%;
color: var(--text-primary);
background: var(--input-bg);
border: 0.5px solid var(--border-light);
border-radius: 15px;
padding: 12px 13px;
font: inherit;
font-size: 0.93rem;
outline: none;
transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
html.kb-page-resource-tellraw textarea {
resize: vertical;
min-height: 76px;
line-height: 1.55;
}
html.kb-page-resource-tellraw input:focus,
html.kb-page-resource-tellraw select:focus,
html.kb-page-resource-tellraw textarea:focus {
border-color: color-mix(in srgb, var(--link-color) 56%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--link-color) 14%, transparent);
}
html.kb-page-resource-tellraw .full, html.kb-page-resource-tellraw.full { grid-column: 1 / -1; }
html.kb-page-resource-tellraw .toolbar, html.kb-page-resource-tellraw.toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 0;
}
html.kb-page-resource-tellraw .quick-copy-bar, html.kb-page-resource-tellraw.quick-copy-bar {
position: sticky;
top: 72px;
z-index: 18;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: -4px 0 18px;
padding: 10px;
border-radius: 18px;
background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
border: 0.5px solid var(--border-light);
box-shadow: 0 10px 28px var(--shadow);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
html.kb-page-resource-tellraw .quick-copy-bar .btn, html.kb-page-resource-tellraw.quick-copy-bar .btn { margin: 0; }
html.kb-page-resource-tellraw .btn, html.kb-page-resource-tellraw.btn {
border: 0;
border-radius: 999px;
background: var(--button-bg);
color: var(--text-primary);
font: inherit;
font-size: 0.88rem;
font-weight: 540;
padding: 10px 14px;
cursor: pointer;
border: 0.5px solid var(--border-light);
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
html.kb-page-resource-tellraw .btn:hover, html.kb-page-resource-tellraw.btn:hover {
background: var(--button-hover);
transform: translateY(-1px);
border-color: var(--border-card);
}
html.kb-page-resource-tellraw .btn.primary, html.kb-page-resource-tellraw.btn.primary {
background: var(--link-color);
color: #fff;
border-color: transparent;
}
html.kb-page-resource-tellraw .btn.danger, html.kb-page-resource-tellraw.btn.danger { color: var(--danger); }
html.kb-page-resource-tellraw .btn.small, html.kb-page-resource-tellraw.btn.small { padding: 8px 11px; font-size: 0.8rem; }
html.kb-page-resource-tellraw .role-template-panel, html.kb-page-resource-tellraw.role-template-panel {
margin: 0 0 18px;
padding: 16px;
border-radius: 22px;
background: var(--card-bg);
border: 0.5px solid var(--border-light);
}
html.kb-page-resource-tellraw .role-template-head, html.kb-page-resource-tellraw.role-template-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
html.kb-page-resource-tellraw .role-template-head p, html.kb-page-resource-tellraw.role-template-head p {
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.55;
margin-top: 5px;
}
html.kb-page-resource-tellraw .role-form, html.kb-page-resource-tellraw.role-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
html.kb-page-resource-tellraw .role-list, html.kb-page-resource-tellraw.role-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-height: 34px;
align-items: center;
}
html.kb-page-resource-tellraw .role-chip, html.kb-page-resource-tellraw.role-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px;
border-radius: 999px;
border: 0.5px solid var(--border-light);
background: var(--button-bg);
}
html.kb-page-resource-tellraw .role-use, html.kb-page-resource-tellraw.role-use,
html.kb-page-resource-tellraw .role-append, html.kb-page-resource-tellraw.role-append,
html.kb-page-resource-tellraw .role-delete, html.kb-page-resource-tellraw.role-delete {
border: 0;
background: transparent;
color: var(--text-primary);
font: inherit;
cursor: pointer;
border-radius: 999px;
line-height: 1;
}
html.kb-page-resource-tellraw .role-use, html.kb-page-resource-tellraw.role-use {
padding: 7px 9px;
font-size: 0.83rem;
font-weight: 560;
}
html.kb-page-resource-tellraw .role-append, html.kb-page-resource-tellraw.role-append,
html.kb-page-resource-tellraw .role-delete, html.kb-page-resource-tellraw.role-delete {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
border: 0.5px solid var(--border-light);
background: var(--bg-secondary);
}
html.kb-page-resource-tellraw .role-use:hover, html.kb-page-resource-tellraw.role-use:hover,
html.kb-page-resource-tellraw .role-append:hover, html.kb-page-resource-tellraw.role-append:hover,
html.kb-page-resource-tellraw .role-delete:hover, html.kb-page-resource-tellraw.role-delete:hover {
background: var(--button-hover);
}
html.kb-page-resource-tellraw .role-delete:hover, html.kb-page-resource-tellraw.role-delete:hover { color: var(--danger); }
html.kb-page-resource-tellraw .role-empty, html.kb-page-resource-tellraw.role-empty {
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.5;
}
html.kb-page-resource-tellraw .role-template-sample, html.kb-page-resource-tellraw.role-template-sample {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--text-secondary);
background: var(--button-bg);
border: 0.5px solid var(--border-light);
border-radius: 9px;
padding: 1px 6px;
white-space: nowrap;
}
html.kb-page-resource-tellraw .segment-list, html.kb-page-resource-tellraw.segment-list {
display: flex;
flex-direction: column;
gap: 14px;
}
html.kb-page-resource-tellraw .segment, html.kb-page-resource-tellraw.segment {
border: 0.5px solid var(--border-light);
background: var(--card-bg);
border-radius: 24px;
padding: 16px;
box-shadow: 0 1px 2px var(--shadow);
}
html.kb-page-resource-tellraw .segment-head, html.kb-page-resource-tellraw.segment-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
html.kb-page-resource-tellraw .segment-index, html.kb-page-resource-tellraw.segment-index {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 10px;
border-radius: 999px;
background: var(--button-bg);
color: var(--text-secondary);
border: 0.5px solid var(--border-light);
font-size: 0.8rem;
font-weight: 600;
}
html.kb-page-resource-tellraw .style-row, html.kb-page-resource-tellraw.style-row,
html.kb-page-resource-tellraw .check-row, html.kb-page-resource-tellraw.check-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
html.kb-page-resource-tellraw .check, html.kb-page-resource-tellraw.check {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 10px;
border-radius: 999px;
background: var(--button-bg);
border: 0.5px solid var(--border-light);
color: var(--text-secondary);
font-size: 0.82rem;
user-select: none;
}
html.kb-page-resource-tellraw .check input, html.kb-page-resource-tellraw.check input {
width: auto;
accent-color: var(--link-color);
}
html.kb-page-resource-tellraw .color-dot, html.kb-page-resource-tellraw.color-dot {
width: 20px;
height: 20px;
border-radius: 999px;
border: 0.5px solid rgba(0,0,0,0.18);
display: inline-block;
vertical-align: -4px;
background: var(--dot, #fff);
}
html.kb-page-resource-tellraw .custom-color-field, html.kb-page-resource-tellraw.custom-color-field {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
html.kb-page-resource-tellraw .custom-color-preview, html.kb-page-resource-tellraw.custom-color-preview {
width: 42px;
height: 42px;
border-radius: 14px;
border: 0.5px solid var(--border-light);
background:
linear-gradient(45deg, rgba(0,0,0,.08) 25%, transparent 25% 75%, rgba(0,0,0,.08) 75%),
linear-gradient(45deg, rgba(0,0,0,.08) 25%, transparent 25% 75%, rgba(0,0,0,.08) 75%),
var(--custom-color, #00aaff);
background-position: 0 0, 6px 6px, 0 0;
background-size: 12px 12px, 12px 12px, auto;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
html.kb-page-resource-tellraw .color-picker-float, html.kb-page-resource-tellraw.color-picker-float {
position: fixed;
inset: 0;
z-index: 260;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0,0,0,0.26);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
html.kb-page-resource-tellraw .color-picker-float.active, html.kb-page-resource-tellraw.color-picker-float.active { display: flex; }
html.kb-page-resource-tellraw .color-picker-card, html.kb-page-resource-tellraw.color-picker-card {
width: min(720px, 100%);
max-height: min(760px, calc(100vh - 48px));
overflow: auto;
background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
border: 0.5px solid var(--border-card);
border-radius: 28px;
box-shadow: 0 24px 70px rgba(0,0,0,.28);
padding: 20px;
}
html.kb-page-resource-tellraw .color-picker-head, html.kb-page-resource-tellraw.color-picker-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
html.kb-page-resource-tellraw .color-picker-title, html.kb-page-resource-tellraw.color-picker-title {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
html.kb-page-resource-tellraw .color-picker-swatch, html.kb-page-resource-tellraw.color-picker-swatch {
width: 44px;
height: 44px;
flex: 0 0 auto;
border-radius: 16px;
border: 0.5px solid var(--border-light);
background: var(--picked-color, #00aaff);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
html.kb-page-resource-tellraw .color-picker-title strong, html.kb-page-resource-tellraw.color-picker-title strong {
display: block;
font-size: 1rem;
font-weight: 650;
letter-spacing: -0.01em;
}
html.kb-page-resource-tellraw .color-picker-title input, html.kb-page-resource-tellraw.color-picker-title input {
width: 128px;
margin-top: 6px;
padding: 8px 10px;
border-radius: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html.kb-page-resource-tellraw .color-picker-body, html.kb-page-resource-tellraw.color-picker-body {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
html.kb-page-resource-tellraw .color-wheel-wrap, html.kb-page-resource-tellraw.color-wheel-wrap {
position: relative;
width: 220px;
height: 220px;
margin: 0 auto;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--border-light), 0 10px 28px var(--shadow);
}
html.kb-page-resource-tellraw #color-wheel {
display: block;
width: 220px;
height: 220px;
border-radius: 999px;
cursor: crosshair;
touch-action: none;
}
html.kb-page-resource-tellraw .color-wheel-cursor, html.kb-page-resource-tellraw.color-wheel-cursor {
position: absolute;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.32);
pointer-events: none;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
html.kb-page-resource-tellraw .color-control-groups, html.kb-page-resource-tellraw.color-control-groups {
display: grid;
gap: 16px;
}
html.kb-page-resource-tellraw .color-control-group, html.kb-page-resource-tellraw.color-control-group {
display: grid;
gap: 10px;
padding: 14px;
border-radius: 20px;
border: 0.5px solid var(--border-light);
background: var(--card-bg);
}
html.kb-page-resource-tellraw .color-control-group h3, html.kb-page-resource-tellraw.color-control-group h3 {
font-size: 0.88rem;
font-weight: 620;
letter-spacing: -0.01em;
}
html.kb-page-resource-tellraw .color-row, html.kb-page-resource-tellraw.color-row {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 72px;
gap: 10px;
align-items: center;
}
html.kb-page-resource-tellraw .color-row span, html.kb-page-resource-tellraw.color-row span {
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 650;
}
html.kb-page-resource-tellraw .color-row input[type="range"], html.kb-page-resource-tellraw.color-row input[type="range"] {
height: 28px;
padding: 0;
border: 0;
background: transparent;
appearance: none;
-webkit-appearance: none;
}
html.kb-page-resource-tellraw .color-row input[type="range"]::-webkit-slider-runnable-track, html.kb-page-resource-tellraw.color-row input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 999px;
background: var(--track, linear-gradient(90deg, #000, #fff));
border: 0.5px solid var(--border-light);
}
html.kb-page-resource-tellraw .color-row input[type="range"]::-moz-range-track, html.kb-page-resource-tellraw.color-row input[type="range"]::-moz-range-track {
height: 8px;
border-radius: 999px;
background: var(--track, linear-gradient(90deg, #000, #fff));
border: 0.5px solid var(--border-light);
}
html.kb-page-resource-tellraw .color-row input[type="range"]::-webkit-slider-thumb, html.kb-page-resource-tellraw.color-row input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -6px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(0,0,0,.24);
box-shadow: 0 1px 6px rgba(0,0,0,.24);
}
html.kb-page-resource-tellraw .color-row input[type="range"]::-moz-range-thumb, html.kb-page-resource-tellraw.color-row input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(0,0,0,.24);
box-shadow: 0 1px 6px rgba(0,0,0,.24);
}
html.kb-page-resource-tellraw .color-row input[type="number"], html.kb-page-resource-tellraw.color-row input[type="number"] {
padding: 8px 9px;
border-radius: 12px;
font-size: 0.82rem;
text-align: right;
}
html.kb-page-resource-tellraw .code-box, html.kb-page-resource-tellraw.code-box {
background: var(--code-bg);
color: var(--code-text);
border-radius: 22px;
overflow: hidden;
min-height: 128px;
border: 0.5px solid rgba(255,255,255,0.08);
}
html.kb-page-resource-tellraw .code-output, html.kb-page-resource-tellraw.code-output {
width: 100%;
min-height: 138px;
resize: vertical;
border: 0;
border-radius: 22px;
background: transparent;
color: var(--code-text);
padding: 18px;
outline: none;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.84rem;
line-height: 1.55;
white-space: pre-wrap;
}
html.kb-page-resource-tellraw pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.84rem;
line-height: 1.55;
}
html.kb-page-resource-tellraw .minecraft-preview-stage, html.kb-page-resource-tellraw.minecraft-preview-stage {
padding: 14px;
background: var(--card-bg);
border: 0.5px solid var(--border-light);
border-radius: 22px;
}
html.kb-page-resource-tellraw .minecraft-screen, html.kb-page-resource-tellraw.minecraft-screen {
min-height: 360px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.10);
background: #202225;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -80px 120px rgba(0,0,0,0.30);
position: relative;
}
html.kb-page-resource-tellraw .dark-theme .minecraft-screen, html.kb-page-resource-tellraw.dark-theme .minecraft-screen { background: #17181a; }
html.kb-page-resource-tellraw .minecraft-screen::before, html.kb-page-resource-tellraw.minecraft-screen::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 12px, rgba(0,0,0,0.018) 12px 24px);
pointer-events: none;
}
html.kb-page-resource-tellraw .mc-hotbar, html.kb-page-resource-tellraw.mc-hotbar {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(9, 34px);
gap: 3px;
opacity: .34;
z-index: 2;
}
html.kb-page-resource-tellraw .slot, html.kb-page-resource-tellraw.slot {
height: 34px;
border: 2px solid rgba(255,255,255,.26);
background: rgba(0,0,0,.34);
box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.28);
}
html.kb-page-resource-tellraw .slot:nth-child(1), html.kb-page-resource-tellraw.slot:nth-child(1) { border-color: rgba(255,255,255,.62); }
html.kb-page-resource-tellraw .chat-box, html.kb-page-resource-tellraw.chat-box {
position: absolute;
left: 22px;
bottom: 82px;
width: min(calc(100% - 44px), calc(var(--chat-line-px) + 28px));
max-height: calc(100% - 128px);
padding: 8px 10px;
background: rgba(0,0,0,.52);
color: #fff;
font-family: var(--mc-font);
font-size: var(--chat-font-size);
line-height: var(--chat-line-height);
white-space: pre;
word-break: normal;
overflow-wrap: normal;
overflow-x: auto;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-color: rgba(255,255,255,.36) transparent;
scrollbar-width: thin;
tab-size: 4;
font-variant-ligatures: none;
text-rendering: geometricPrecision;
text-shadow: 2px 2px 0 rgba(0,0,0,.85);
image-rendering: pixelated;
-webkit-font-smoothing: none;
font-smooth: never;
z-index: 3;
}
html.kb-page-resource-tellraw .chat-box::-webkit-scrollbar, html.kb-page-resource-tellraw.chat-box::-webkit-scrollbar { width: 8px; height: 8px; }
html.kb-page-resource-tellraw .chat-box::-webkit-scrollbar-track, html.kb-page-resource-tellraw.chat-box::-webkit-scrollbar-track { background: transparent; }
html.kb-page-resource-tellraw .chat-box::-webkit-scrollbar-thumb, html.kb-page-resource-tellraw.chat-box::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.32);
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
html.kb-page-resource-tellraw .chat-calibrator, html.kb-page-resource-tellraw.chat-calibrator {
width: var(--chat-line-px);
color: rgba(255,255,255,.42);
font-family: var(--mc-font);
font-size: var(--chat-font-size);
line-height: var(--chat-line-height);
white-space: pre;
word-break: normal;
overflow-wrap: normal;
overflow: hidden;
tab-size: 4;
font-variant-ligatures: none;
text-rendering: geometricPrecision;
user-select: none;
margin-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,.14);
padding-bottom: 4px;
}
html.kb-page-resource-tellraw .preview, html.kb-page-resource-tellraw.preview {
width: var(--chat-line-px);
min-height: 64px;
color: #fff;
font-family: var(--mc-font);
font-size: var(--chat-font-size);
line-height: var(--chat-line-height);
white-space: pre;
word-break: normal;
overflow-wrap: normal;
overflow-x: visible;
overflow-y: visible;
tab-size: 4;
font-variant-ligatures: none;
text-rendering: geometricPrecision;
user-select: text;
outline: none;
}
html.kb-page-resource-tellraw .preview-message, html.kb-page-resource-tellraw.preview-message {
white-space: pre;
word-break: normal;
overflow-wrap: normal;
tab-size: 4;
font-variant-ligatures: none;
text-rendering: geometricPrecision;
outline: none;
}
html.kb-page-resource-tellraw .preview [data-preview-seg], html.kb-page-resource-tellraw.preview [data-preview-seg] {
cursor: text;
border-radius: 2px;
outline: none;
white-space: pre;
display: inline;
vertical-align: baseline;
word-break: normal;
overflow-wrap: normal;
font-variant-ligatures: none;
text-rendering: geometricPrecision;
}
html.kb-page-resource-tellraw .mc-ascii-art, html.kb-page-resource-tellraw.mc-ascii-art {
margin: 0;
padding: 0;
display: inline;
white-space: pre;
word-break: normal;
overflow-wrap: normal;
font-family: var(--mc-font);
font-size: var(--chat-font-size);
line-height: var(--chat-line-height);
tab-size: 4;
font-variant-ligatures: none;
text-rendering: geometricPrecision;
}
html.kb-page-resource-tellraw .preview [data-preview-seg]:hover, html.kb-page-resource-tellraw.preview [data-preview-seg]:hover { background: rgba(255,255,255,0.08); }
html.kb-page-resource-tellraw .preview .preview-locked-selection, html.kb-page-resource-tellraw.preview .preview-locked-selection {
background: rgba(255,255,255,0.18);
box-shadow: inset 0 -2px 0 rgba(255,255,255,0.48);
border-radius: 3px;
}
html.kb-page-resource-tellraw .preview [data-preview-readonly="true"], html.kb-page-resource-tellraw.preview [data-preview-readonly="true"] { cursor: default; opacity: .86; }
html.kb-page-resource-tellraw .preview [data-insertion], html.kb-page-resource-tellraw.preview [data-insertion] { cursor: copy; }
html.kb-page-resource-tellraw .preview-prefix, html.kb-page-resource-tellraw.preview-prefix { color: #aeb4bd; margin-right: 6px; user-select: none; }
html.kb-page-resource-tellraw .mc-bold, html.kb-page-resource-tellraw.mc-bold { font-weight: 800; }
html.kb-page-resource-tellraw .mc-italic, html.kb-page-resource-tellraw.mc-italic { font-style: italic; }
html.kb-page-resource-tellraw .mc-underlined, html.kb-page-resource-tellraw.mc-underlined { text-decoration: underline; text-underline-offset: 0.16em; }
html.kb-page-resource-tellraw .mc-strikethrough, html.kb-page-resource-tellraw.mc-strikethrough { text-decoration: line-through; }
html.kb-page-resource-tellraw .mc-obfuscated, html.kb-page-resource-tellraw.mc-obfuscated { letter-spacing: 0.08em; filter: blur(0.3px); }
html.kb-page-resource-tellraw .preview-status, html.kb-page-resource-tellraw.preview-status {
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
color: var(--text-secondary);
font-size: 0.78rem;
line-height: 1.5;
margin-top: 10px;
}
html.kb-page-resource-tellraw .preview-editor, html.kb-page-resource-tellraw.preview-editor {
margin-top: 12px;
display: grid;
gap: 12px;
padding: 14px;
border-radius: 20px;
background: var(--card-bg);
border: 0.5px solid var(--border-light);
}
html.kb-page-resource-tellraw .selection-info, html.kb-page-resource-tellraw.selection-info {
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.45;
}
html.kb-page-resource-tellraw .palette, html.kb-page-resource-tellraw.palette {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 8px;
}
html.kb-page-resource-tellraw .palette-btn, html.kb-page-resource-tellraw.palette-btn {
min-height: 34px;
border: 0.5px solid var(--border-light);
border-radius: 12px;
background: var(--button-bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px;
transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
html.kb-page-resource-tellraw .palette-btn:hover, html.kb-page-resource-tellraw.palette-btn:hover {
transform: translateY(-1px);
background: var(--button-hover);
border-color: var(--border-card);
}
html.kb-page-resource-tellraw .palette-swatch, html.kb-page-resource-tellraw.palette-swatch {
width: 18px;
height: 18px;
border-radius: 999px;
border: 0.5px solid rgba(0,0,0,0.28);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
html.kb-page-resource-tellraw .selection-mini-grid, html.kb-page-resource-tellraw.selection-mini-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
html.kb-page-resource-tellraw .mock-chat-input, html.kb-page-resource-tellraw.mock-chat-input {
margin-top: 10px;
background: rgba(0,0,0,0.36);
color: #fff;
border-color: rgba(255,255,255,0.14);
font-family: var(--mc-font);
}
html.kb-page-resource-tellraw .event-preview-panel, html.kb-page-resource-tellraw.event-preview-panel {
margin-top: 10px;
border-radius: 16px;
border: 0.5px solid var(--border-light);
background: var(--card-bg);
padding: 12px 14px;
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.55;
min-height: 44px;
}
html.kb-page-resource-tellraw .event-preview-panel strong, html.kb-page-resource-tellraw.event-preview-panel strong {
color: var(--text-primary);
font-weight: 620;
}
html.kb-page-resource-tellraw .event-preview-panel code, html.kb-page-resource-tellraw.event-preview-panel code {
color: var(--text-primary);
background: var(--button-bg);
border: 0.5px solid var(--border-light);
border-radius: 7px;
padding: 1px 5px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.78rem;
}
html.kb-page-resource-tellraw .event-preview-panel .event-preview-value, html.kb-page-resource-tellraw.event-preview-panel .event-preview-value {
margin-top: 5px;
color: var(--text-primary);
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.8rem;
}
html.kb-page-resource-tellraw .mc-hover-tooltip, html.kb-page-resource-tellraw.mc-hover-tooltip {
position: fixed;
display: none;
z-index: 1000;
max-width: min(520px, calc(100vw - 32px));
padding: 8px 10px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(10,10,12,.96);
color: #fff;
font-family: var(--mc-font);
font-size: var(--chat-font-size);
line-height: var(--chat-line-height);
text-shadow: 2px 2px 0 rgba(0,0,0,.85);
white-space: pre-wrap;
word-break: normal;
overflow-wrap: anywhere;
pointer-events: none;
box-shadow: 0 10px 30px rgba(0,0,0,.42);
}
@media (max-width: 680px){
html.kb-page-resource-tellraw .palette, html.kb-page-resource-tellraw.palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.kb-page-resource-tellraw .selection-mini-grid, html.kb-page-resource-tellraw.selection-mini-grid { grid-template-columns: 1fr; }
html.kb-page-resource-tellraw .chat-box, html.kb-page-resource-tellraw.chat-box { left: 12px; width: calc(100% - 24px); max-height: calc(100% - 116px); }
html.kb-page-resource-tellraw .chat-calibrator, html.kb-page-resource-tellraw.chat-calibrator,
html.kb-page-resource-tellraw .preview, html.kb-page-resource-tellraw.preview { width: min(var(--chat-line-px), calc(100vw - 82px)); }
html.kb-page-resource-tellraw .mc-hotbar, html.kb-page-resource-tellraw.mc-hotbar { grid-template-columns: repeat(9, 28px); }
html.kb-page-resource-tellraw .slot, html.kb-page-resource-tellraw.slot { height: 28px; }
}
html.kb-page-resource-tellraw .note, html.kb-page-resource-tellraw.note {
border-radius: 18px;
background: var(--card-bg);
border: 0.5px solid var(--border-light);
padding: 14px 15px;
color: var(--text-secondary);
font-size: 0.84rem;
line-height: 1.6;
}
html.kb-page-resource-tellraw .note strong, html.kb-page-resource-tellraw.note strong { color: var(--text-primary); font-weight: 620; }
html.kb-page-resource-tellraw .status-line, html.kb-page-resource-tellraw.status-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.5;
margin-top: 10px;
}
html.kb-page-resource-tellraw .pill, html.kb-page-resource-tellraw.pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border-radius: 999px;
background: var(--button-bg);
border: 0.5px solid var(--border-light);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 540;
white-space: nowrap;
}
html.kb-page-resource-tellraw .dot, html.kb-page-resource-tellraw.dot {
width: 7px;
height: 7px;
border-radius: 99px;
background: var(--success);
}
html.kb-page-resource-tellraw .dot.warn, html.kb-page-resource-tellraw.dot.warn { background: var(--warning); }
html.kb-page-resource-tellraw .dot.danger, html.kb-page-resource-tellraw.dot.danger { background: var(--danger); }
html.kb-page-resource-tellraw .help-list, html.kb-page-resource-tellraw.help-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
html.kb-page-resource-tellraw .help-item, html.kb-page-resource-tellraw.help-item {
padding: 12px 14px;
border-radius: 17px;
background: var(--card-bg);
border: 0.5px solid var(--border-light);
color: var(--text-secondary);
font-size: 0.84rem;
line-height: 1.55;
}
html.kb-page-resource-tellraw .version-badge, html.kb-page-resource-tellraw.version-badge {
display: inline-flex;
margin-top: 10px;
padding: 7px 11px;
border-radius: 999px;
border: 0.5px solid var(--border-light);
background: var(--button-bg);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 520;
}
html.kb-page-resource-tellraw .help-item code, html.kb-page-resource-tellraw.help-item code {
color: var(--text-primary);
background: var(--button-bg);
border: 0.5px solid var(--border-light);
border-radius: 7px;
padding: 1px 5px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.78rem;
}
html.kb-page-resource-tellraw .import-area, html.kb-page-resource-tellraw.import-area { min-height: 118px; }
html.kb-page-resource-tellraw .site-record, html.kb-page-resource-tellraw.site-record {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
padding-top: 18px;
border-top: 0.5px solid var(--border-light);
color: var(--text-secondary);
font-size: 0.78rem;
line-height: 1.5;
}
html.kb-page-resource-tellraw .site-record a, html.kb-page-resource-tellraw.site-record a {
color: var(--text-secondary);
transition: color 0.2s ease;
}
html.kb-page-resource-tellraw .site-record a:hover, html.kb-page-resource-tellraw.site-record a:hover { color: var(--link-color); }
@media (max-width: 980px){
html.kb-page-resource-tellraw .layout, html.kb-page-resource-tellraw.layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px){
body.kb-page-resource-tellraw { padding: 16px; }
html.kb-page-resource-tellraw .shell, html.kb-page-resource-tellraw.shell { margin-top: 70px; }
html.kb-page-resource-tellraw .hero, html.kb-page-resource-tellraw.hero { padding: 32px 24px; border-radius: 28px; }
html.kb-page-resource-tellraw .panel, html.kb-page-resource-tellraw.panel { padding: 18px; border-radius: 24px; }
html.kb-page-resource-tellraw .grid, html.kb-page-resource-tellraw.grid { grid-template-columns: 1fr; }
html.kb-page-resource-tellraw .home-link, html.kb-page-resource-tellraw.home-link { right: 74px; max-width: calc(100vw - 132px); }
html.kb-page-resource-tellraw .segment-head, html.kb-page-resource-tellraw.segment-head { align-items: flex-start; }
html.kb-page-resource-tellraw .custom-color-field, html.kb-page-resource-tellraw.custom-color-field { grid-template-columns: 38px minmax(0, 1fr); }
html.kb-page-resource-tellraw .custom-color-field .open-color-picker, html.kb-page-resource-tellraw.custom-color-field .open-color-picker { grid-column: 1 / -1; justify-content: center; }
html.kb-page-resource-tellraw .color-picker-float, html.kb-page-resource-tellraw.color-picker-float { padding: 14px; align-items: flex-end; }
html.kb-page-resource-tellraw .color-picker-card, html.kb-page-resource-tellraw.color-picker-card { border-radius: 24px; max-height: calc(100vh - 28px); }
html.kb-page-resource-tellraw .color-picker-body, html.kb-page-resource-tellraw.color-picker-body { grid-template-columns: 1fr; }
html.kb-page-resource-tellraw .color-picker-head, html.kb-page-resource-tellraw.color-picker-head { align-items: flex-start; }
html.kb-page-resource-tellraw .color-picker-head > .toolbar, html.kb-page-resource-tellraw.color-picker-head > .toolbar { flex-direction: column; align-items: stretch; }
html.kb-page-resource-tellraw .color-row, html.kb-page-resource-tellraw.color-row { grid-template-columns: 20px minmax(0, 1fr) 64px; }
}
/* Extracted inline styles from resource/tellraw.html */
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-001 { margin-bottom: 18px; }
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-002 { display:none; }
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-003 { justify-content:end; }
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-004 { margin:0; }
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-005 { margin-top:8px; }
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-006 { margin-top: 18px; }
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-007 { margin-top: 10px; }
html.kb-page-resource-tellraw .kb-page-resource-tellraw-inline-008 { opacity: 0.4; }
/* ============================================================ resource/tutorial.html page scope: .kb-page-resource-tutorial ============================================================ */
html.kb-page-resource-tutorial * { box-sizing: border-box; margin: 0; padding: 0; }
html.kb-page-resource-tutorial {
color-scheme: light;
--bg: #f5f5f7;
--surface: rgba(255,255,255,.84);
--surface-strong: #fff;
--surface-soft: #fbfbfd;
--text: #1d1d1f;
--subtext: #6e6e73;
--muted: #8a8a8e;
--line: rgba(0,0,0,.09);
--line-strong: rgba(0,0,0,.16);
--code-bg: #f6f6f8;
--code-text: #161617;
--accent: #1d1d1f;
--accent-soft: rgba(0,0,0,.055);
--warn-bg: #fff8ed;
--warn-text: #9a3412;
--ok-bg: #edfdf4;
--ok-text: #047857;
--radius-xl: 26px;
--radius-lg: 18px;
--radius-md: 12px;
--shadow: 0 18px 50px rgba(0,0,0,.07);
--max: 1480px;
--topbar: 57px;
--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html.kb-page-resource-tutorial .dark-theme, html.kb-page-resource-tutorial.dark-theme {
color-scheme: dark;
--bg: #000;
--surface: rgba(28,28,30,.78);
--surface-strong: #111113;
--surface-soft: #1c1c1e;
--text: #f5f5f7;
--subtext: #a1a1a6;
--muted: #8e8e93;
--line: rgba(255,255,255,.12);
--line-strong: rgba(255,255,255,.2);
--code-bg: #101012;
--code-text: #f5f5f7;
--accent: #f5f5f7;
--accent-soft: rgba(255,255,255,.075);
--warn-bg: rgba(255,149,0,.13);
--warn-text: #ffb340;
--ok-bg: rgba(48,209,88,.13);
--ok-text: #63e58b;
--shadow: 0 18px 50px rgba(0,0,0,.42);
}
html.kb-page-resource-tutorial { scroll-behavior: smooth; }
body.kb-page-resource-tutorial {
min-height: 100vh;
background:
radial-gradient(circle at top left, rgba(255,255,255,.55), transparent 32rem),
var(--bg);
color: var(--text);
font-family: var(--font);
line-height: 1.72;
letter-spacing: -0.01em;
}
html.kb-page-resource-tutorial .dark-theme body, html.kb-page-resource-tutorial.dark-theme body { background: radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 32rem), var(--bg); }
html.kb-page-resource-tutorial a { color: inherit; text-decoration: none; }
html.kb-page-resource-tutorial code,
html.kb-page-resource-tutorial pre,
html.kb-page-resource-tutorial kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
html.kb-page-resource-tutorial .topbar, html.kb-page-resource-tutorial.topbar {
height: var(--topbar);
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(180%) blur(22px);
-webkit-backdrop-filter: saturate(180%) blur(22px);
background: color-mix(in srgb, var(--bg) 78%, transparent);
border-bottom: .5px solid var(--line);
}
html.kb-page-resource-tutorial .topbar-inner, html.kb-page-resource-tutorial.topbar-inner {
max-width: var(--max);
margin: 0 auto;
height: 100%;
padding: 0 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
html.kb-page-resource-tutorial .brand, html.kb-page-resource-tutorial.brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
html.kb-page-resource-tutorial .brand-mark, html.kb-page-resource-tutorial.brand-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); flex: 0 0 auto; }
html.kb-page-resource-tutorial .brand-title, html.kb-page-resource-tutorial.brand-title { font-weight: 650; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kb-page-resource-tutorial .top-actions, html.kb-page-resource-tutorial.top-actions { display: flex; align-items: center; gap: .5rem; }
html.kb-page-resource-tutorial .top-button, html.kb-page-resource-tutorial.top-button,
html.kb-page-resource-tutorial .theme-toggle, html.kb-page-resource-tutorial.theme-toggle {
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
border: .5px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--text);
padding: .42rem .78rem;
font-size: .84rem;
font-weight: 560;
cursor: pointer;
}
html.kb-page-resource-tutorial .top-button:hover, html.kb-page-resource-tutorial.top-button:hover,
html.kb-page-resource-tutorial .theme-toggle:hover, html.kb-page-resource-tutorial.theme-toggle:hover,
html.kb-page-resource-tutorial .nav-link:hover, html.kb-page-resource-tutorial.nav-link:hover { background: var(--surface-strong); }
html.kb-page-resource-tutorial .top-button svg, html.kb-page-resource-tutorial.top-button svg,
html.kb-page-resource-tutorial .theme-toggle svg, html.kb-page-resource-tutorial.theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
html.kb-page-resource-tutorial .theme-toggle .moon-icon, html.kb-page-resource-tutorial.theme-toggle .moon-icon { display: none; }
html.kb-page-resource-tutorial .dark-theme .theme-toggle .sun-icon, html.kb-page-resource-tutorial.dark-theme .theme-toggle .sun-icon { display: none; }
html.kb-page-resource-tutorial .dark-theme .theme-toggle .moon-icon, html.kb-page-resource-tutorial.dark-theme .theme-toggle .moon-icon { display: block; }
html.kb-page-resource-tutorial .doc-shell, html.kb-page-resource-tutorial.doc-shell {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 292px minmax(0, 1fr) 248px;
gap: 1.35rem;
padding: 1.45rem 1.2rem 3rem;
}
html.kb-page-resource-tutorial .left-rail, html.kb-page-resource-tutorial.left-rail,
html.kb-page-resource-tutorial .right-rail, html.kb-page-resource-tutorial.right-rail {
position: sticky;
top: calc(var(--topbar) + 1rem);
height: calc(100vh - var(--topbar) - 2rem);
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
html.kb-page-resource-tutorial .left-card, html.kb-page-resource-tutorial.left-card,
html.kb-page-resource-tutorial .right-card, html.kb-page-resource-tutorial.right-card {
border: .5px solid var(--line);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow);
padding: 1rem;
backdrop-filter: saturate(180%) blur(22px);
-webkit-backdrop-filter: saturate(180%) blur(22px);
}
html.kb-page-resource-tutorial .search-box, html.kb-page-resource-tutorial.search-box { margin-bottom: .85rem; }
html.kb-page-resource-tutorial .search-box input, html.kb-page-resource-tutorial.search-box input {
width: 100%;
border: .5px solid var(--line);
border-radius: 999px;
background: var(--surface-soft);
color: var(--text);
padding: .68rem .85rem;
outline: none;
font: inherit;
font-size: .88rem;
}
html.kb-page-resource-tutorial .search-box input:focus, html.kb-page-resource-tutorial.search-box input:focus { border-color: var(--line-strong); box-shadow: 0 0 0 4px var(--accent-soft); }
html.kb-page-resource-tutorial .nav-group, html.kb-page-resource-tutorial.nav-group { padding: .35rem 0 .9rem; }
html.kb-page-resource-tutorial .nav-group + .nav-group, html.kb-page-resource-tutorial.nav-group + .nav-group { border-top: .5px solid var(--line); padding-top: .9rem; }
html.kb-page-resource-tutorial .nav-group h2, html.kb-page-resource-tutorial.nav-group h2,
html.kb-page-resource-tutorial .right-title, html.kb-page-resource-tutorial.right-title,
html.kb-page-resource-tutorial .meta-title, html.kb-page-resource-tutorial.meta-title {
margin: 0 .48rem .48rem;
color: var(--muted);
font-size: .72rem;
line-height: 1.3;
font-weight: 720;
letter-spacing: .08em;
text-transform: uppercase;
}
html.kb-page-resource-tutorial .nav-link, html.kb-page-resource-tutorial.nav-link {
display: grid;
gap: .12rem;
padding: .56rem .62rem;
border-radius: 13px;
color: var(--subtext);
transition: background .16s ease, color .16s ease;
}
html.kb-page-resource-tutorial .nav-link.is-active, html.kb-page-resource-tutorial.nav-link.is-active { background: var(--accent-soft); color: var(--text); }
html.kb-page-resource-tutorial .nav-path, html.kb-page-resource-tutorial.nav-path { font-size: .72rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.kb-page-resource-tutorial .nav-title, html.kb-page-resource-tutorial.nav-title { font-size: .92rem; font-weight: 610; }
html.kb-page-resource-tutorial .main-col, html.kb-page-resource-tutorial.main-col { min-width: 0; display: grid; gap: 1rem; }
html.kb-page-resource-tutorial .doc-article, html.kb-page-resource-tutorial.doc-article { min-width: 0; }
html.kb-page-resource-tutorial .article-hero, html.kb-page-resource-tutorial.article-hero {
border: .5px solid var(--line);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow);
padding: clamp(1.45rem, 3.5vw, 2.5rem);
margin-bottom: 1rem;
}
html.kb-page-resource-tutorial .crumb, html.kb-page-resource-tutorial.crumb {
display: flex;
flex-wrap: wrap;
gap: .42rem;
align-items: center;
color: var(--muted);
font-size: .82rem;
margin-bottom: .85rem;
}
html.kb-page-resource-tutorial .crumb code, html.kb-page-resource-tutorial.crumb code { color: var(--text); background: var(--accent-soft); border-radius: 999px; padding: .16rem .5rem; font-size: .78rem; }
html.kb-page-resource-tutorial .article-hero h1, html.kb-page-resource-tutorial.article-hero h1 {
max-width: 900px;
font-size: clamp(2.05rem, 5vw, 4.4rem);
line-height: .98;
letter-spacing: -.065em;
font-weight: 730;
margin-bottom: .85rem;
}
html.kb-page-resource-tutorial .article-hero p, html.kb-page-resource-tutorial.article-hero p,
html.kb-page-resource-tutorial .section-subtitle, html.kb-page-resource-tutorial.section-subtitle { max-width: 780px; color: var(--subtext); font-size: clamp(1rem, 1.3vw, 1.13rem); line-height: 1.72; }
html.kb-page-resource-tutorial .article-body, html.kb-page-resource-tutorial.article-body {
border: .5px solid var(--line);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow);
padding: clamp(1rem, 2.5vw, 1.7rem);
}
html.kb-page-resource-tutorial .article-body h2, html.kb-page-resource-tutorial.article-body h2 { font-size: 1.62rem; margin: 1.65rem 0 .5rem; letter-spacing: -.035em; }
html.kb-page-resource-tutorial .article-body h3, html.kb-page-resource-tutorial.article-body h3 { font-size: 1.05rem; margin: 0 0 .35rem; letter-spacing: -.02em; }
html.kb-page-resource-tutorial .article-body p, html.kb-page-resource-tutorial.article-body p { color: var(--subtext); margin: .48rem 0 .95rem; }
html.kb-page-resource-tutorial .article-body strong, html.kb-page-resource-tutorial.article-body strong { color: var(--text); }
html.kb-page-resource-tutorial .path, html.kb-page-resource-tutorial.path,
html.kb-page-resource-tutorial .article-body code:not(pre code), html.kb-page-resource-tutorial.article-body code:not(pre code),
html.kb-page-resource-tutorial .details-body code:not(pre code), html.kb-page-resource-tutorial.details-body code:not(pre code),
html.kb-page-resource-tutorial .mini-table code, html.kb-page-resource-tutorial.mini-table code {
display: inline-flex;
max-width: 100%;
align-items: center;
padding: .13rem .42rem;
border-radius: 7px;
background: var(--code-bg);
color: var(--code-text);
border: .5px solid var(--line);
font-size: .86em;
overflow-wrap: anywhere;
}
html.kb-page-resource-tutorial .grid-two, html.kb-page-resource-tutorial.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .82rem; margin: 1rem 0; }
html.kb-page-resource-tutorial .grid-three, html.kb-page-resource-tutorial.grid-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .82rem; margin: 1rem 0; }
html.kb-page-resource-tutorial .card, html.kb-page-resource-tutorial.card,
html.kb-page-resource-tutorial .step, html.kb-page-resource-tutorial.step,
html.kb-page-resource-tutorial details,
html.kb-page-resource-tutorial .code-card, html.kb-page-resource-tutorial.code-card,
html.kb-page-resource-tutorial .note, html.kb-page-resource-tutorial.note,
html.kb-page-resource-tutorial .mini-table, html.kb-page-resource-tutorial.mini-table,
html.kb-page-resource-tutorial .dir-overview-card, html.kb-page-resource-tutorial.dir-overview-card,
html.kb-page-resource-tutorial .folder-group, html.kb-page-resource-tutorial.folder-group,
html.kb-page-resource-tutorial .raw-tree-panel, html.kb-page-resource-tutorial.raw-tree-panel {
border: .5px solid var(--line);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}
html.kb-page-resource-tutorial .card, html.kb-page-resource-tutorial.card { padding: 1rem; }
html.kb-page-resource-tutorial .card p, html.kb-page-resource-tutorial.card p { margin: 0; font-size: .93rem; }
html.kb-page-resource-tutorial .steps, html.kb-page-resource-tutorial.steps { display: grid; gap: .72rem; counter-reset: step; margin: 1rem 0; }
html.kb-page-resource-tutorial .step, html.kb-page-resource-tutorial.step { counter-increment: step; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .85rem; padding: 1rem; align-items: start; }
html.kb-page-resource-tutorial .step::before, html.kb-page-resource-tutorial.step::before { content: counter(step, decimal-leading-zero); width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--text); font-size: .78rem; font-weight: 720; font-feature-settings: "tnum"; }
html.kb-page-resource-tutorial .note, html.kb-page-resource-tutorial.note { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .72rem; padding: .9rem 1rem; margin: 1rem 0; }
html.kb-page-resource-tutorial .note::before, html.kb-page-resource-tutorial.note::before { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--text); font-weight: 800; }
html.kb-page-resource-tutorial .note.info::before, html.kb-page-resource-tutorial.note.info::before { content: "i"; }
html.kb-page-resource-tutorial .note.warn, html.kb-page-resource-tutorial.note.warn { background: var(--warn-bg); color: var(--warn-text); }
html.kb-page-resource-tutorial .note.warn::before, html.kb-page-resource-tutorial.note.warn::before { content: "!"; color: var(--warn-text); background: color-mix(in srgb, var(--warn-text) 14%, transparent); }
html.kb-page-resource-tutorial .note.ok, html.kb-page-resource-tutorial.note.ok { background: var(--ok-bg); color: var(--ok-text); }
html.kb-page-resource-tutorial .note.ok::before, html.kb-page-resource-tutorial.note.ok::before { content: "✓"; color: var(--ok-text); background: color-mix(in srgb, var(--ok-text) 14%, transparent); }
html.kb-page-resource-tutorial .note p, html.kb-page-resource-tutorial.note p { margin: 0; color: inherit; }
html.kb-page-resource-tutorial .code-card, html.kb-page-resource-tutorial.code-card { margin: 1rem 0; overflow: hidden; background: var(--code-bg); }
html.kb-page-resource-tutorial .code-header, html.kb-page-resource-tutorial.code-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .66rem .82rem; border-bottom: .5px solid var(--line); color: var(--subtext); font-size: .82rem; font-weight: 620; }
html.kb-page-resource-tutorial .copy-button, html.kb-page-resource-tutorial.copy-button { border: .5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); padding: .26rem .64rem; cursor: pointer; font-size: .78rem; font-weight: 650; }
html.kb-page-resource-tutorial pre { overflow: auto; padding: 1rem; color: var(--code-text); font-size: .875rem; line-height: 1.62; tab-size: 2; }
html.kb-page-resource-tutorial summary { cursor: pointer; list-style: none; padding: .95rem 1rem; font-weight: 680; display: flex; justify-content: space-between; gap: 1rem; }
html.kb-page-resource-tutorial summary::-webkit-details-marker { display: none; }
html.kb-page-resource-tutorial summary::after { content: "+"; color: var(--muted); font-size: 1.1rem; }
html.kb-page-resource-tutorial details[open] summary::after { content: "−"; }
html.kb-page-resource-tutorial .details-body, html.kb-page-resource-tutorial.details-body { padding: 0 1rem 1rem; color: var(--subtext); }
html.kb-page-resource-tutorial .version-switch, html.kb-page-resource-tutorial.version-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
html.kb-page-resource-tutorial .tab-button, html.kb-page-resource-tutorial.tab-button { border: .5px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--text); padding: .48rem .85rem; cursor: pointer; font-size: .88rem; font-weight: 650; }
html.kb-page-resource-tutorial .tab-button.active, html.kb-page-resource-tutorial.tab-button.active { background: var(--text); color: var(--bg); border-color: transparent; }
html.kb-page-resource-tutorial .tab-panel, html.kb-page-resource-tutorial.tab-panel { display: none; }
html.kb-page-resource-tutorial .tab-panel.active, html.kb-page-resource-tutorial.tab-panel.active { display: block; }
html.kb-page-resource-tutorial .mini-table, html.kb-page-resource-tutorial.mini-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 1rem 0; font-size: .92rem; }
html.kb-page-resource-tutorial .mini-table th, html.kb-page-resource-tutorial.mini-table th,
html.kb-page-resource-tutorial .mini-table td, html.kb-page-resource-tutorial.mini-table td { padding: .76rem .82rem; border-bottom: .5px solid var(--line); vertical-align: top; text-align: left; }
html.kb-page-resource-tutorial .mini-table th, html.kb-page-resource-tutorial.mini-table th { background: var(--accent-soft); color: var(--text); }
html.kb-page-resource-tutorial .mini-table td, html.kb-page-resource-tutorial.mini-table td { color: var(--subtext); }
html.kb-page-resource-tutorial .mini-table tr:last-child td, html.kb-page-resource-tutorial.mini-table tr:last-child td { border-bottom: none; }
html.kb-page-resource-tutorial .dir-overview-grid, html.kb-page-resource-tutorial.dir-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .82rem; margin: 1rem 0 1.35rem; }
html.kb-page-resource-tutorial .dir-overview-card, html.kb-page-resource-tutorial.dir-overview-card { padding: .9rem; min-height: 8.2rem; }
html.kb-page-resource-tutorial .dir-overview-name, html.kb-page-resource-tutorial.dir-overview-name { display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--text); background: var(--accent-soft); border-radius: 999px; padding: .16rem .48rem; margin-bottom: .6rem; }
html.kb-page-resource-tutorial .dir-overview-card strong, html.kb-page-resource-tutorial.dir-overview-card strong { display: block; font-size: 1.25rem; line-height: 1.1; }
html.kb-page-resource-tutorial .dir-overview-card p, html.kb-page-resource-tutorial.dir-overview-card p { font-size: .82rem; line-height: 1.55; }
html.kb-page-resource-tutorial .folder-groups, html.kb-page-resource-tutorial.folder-groups { display: grid; gap: .75rem; margin-top: 1rem; }
html.kb-page-resource-tutorial .folder-group, html.kb-page-resource-tutorial.folder-group { overflow: hidden; }
html.kb-page-resource-tutorial .folder-group summary span, html.kb-page-resource-tutorial.folder-group summary span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 720; }
html.kb-page-resource-tutorial .folder-group summary em, html.kb-page-resource-tutorial.folder-group summary em { font-style: normal; color: var(--muted); font-size: .84rem; }
html.kb-page-resource-tutorial .folder-list, html.kb-page-resource-tutorial.folder-list { display: grid; gap: .55rem; padding: 0 .85rem .9rem; }
html.kb-page-resource-tutorial .folder-row, html.kb-page-resource-tutorial.folder-row { border: .5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: .78rem .86rem; margin-left: calc(var(--level) * .85rem); }
html.kb-page-resource-tutorial .folder-row-head, html.kb-page-resource-tutorial.folder-row-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .3rem; }
html.kb-page-resource-tutorial .folder-row code, html.kb-page-resource-tutorial.folder-row code { color: var(--text); background: transparent; border: 0; padding: 0; overflow-wrap: anywhere; word-break: break-word; }
html.kb-page-resource-tutorial .folder-row-head span, html.kb-page-resource-tutorial.folder-row-head span { flex: 0 0 auto; font-size: .72rem; color: var(--muted); border: .5px solid var(--line); border-radius: 999px; padding: .08rem .42rem; }
html.kb-page-resource-tutorial .folder-row p, html.kb-page-resource-tutorial.folder-row p { font-size: .88rem; line-height: 1.58; margin: 0; }
html.kb-page-resource-tutorial .folder-row.is-hidden, html.kb-page-resource-tutorial.folder-row.is-hidden,
html.kb-page-resource-tutorial .folder-group.is-hidden, html.kb-page-resource-tutorial.folder-group.is-hidden { display: none; }
html.kb-page-resource-tutorial .folder-empty, html.kb-page-resource-tutorial.folder-empty { display: none; margin-top: 1rem; padding: 1rem; border: .5px solid var(--line); border-radius: var(--radius-lg); color: var(--subtext); background: var(--surface-soft); text-align: center; font-size: .92rem; }
html.kb-page-resource-tutorial .folder-empty.is-visible, html.kb-page-resource-tutorial.folder-empty.is-visible { display: block; }
html.kb-page-resource-tutorial .directory-tools, html.kb-page-resource-tutorial.directory-tools { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; padding: .75rem; border: .5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft); }
html.kb-page-resource-tutorial .directory-tools input, html.kb-page-resource-tutorial.directory-tools input { width: 100%; border: .5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); padding: .68rem .85rem; font: inherit; outline: none; }
html.kb-page-resource-tutorial .reference-title, html.kb-page-resource-tutorial.reference-title { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html.kb-page-resource-tutorial .reference-subtitle, html.kb-page-resource-tutorial.reference-subtitle { color: var(--subtext); font-size: .92rem; font-weight: 560; margin-bottom: .82rem; }
html.kb-page-resource-tutorial .raw-tree-panel .tree, html.kb-page-resource-tutorial.raw-tree-panel .tree { max-height: 58vh; overflow: auto; padding: 1rem; border-radius: var(--radius-md); background: var(--code-bg); color: var(--code-text); font-size: .78rem; white-space: pre; }
html.kb-page-resource-tutorial .right-card, html.kb-page-resource-tutorial.right-card { display: grid; gap: 1rem; }
html.kb-page-resource-tutorial .article-toc, html.kb-page-resource-tutorial.article-toc { display: grid; gap: .18rem; }
html.kb-page-resource-tutorial .article-toc a, html.kb-page-resource-tutorial.article-toc a { display: block; padding: .3rem .42rem; border-radius: 9px; color: var(--subtext); font-size: .84rem; line-height: 1.4; }
html.kb-page-resource-tutorial .article-toc a:hover, html.kb-page-resource-tutorial.article-toc a:hover { background: var(--accent-soft); color: var(--text); }
html.kb-page-resource-tutorial .article-toc a.depth-3, html.kb-page-resource-tutorial.article-toc a.depth-3 { padding-left: 1.05rem; font-size: .8rem; color: var(--muted); }
html.kb-page-resource-tutorial .meta-box, html.kb-page-resource-tutorial.meta-box { border-top: .5px solid var(--line); padding-top: 1rem; }
html.kb-page-resource-tutorial .meta-row, html.kb-page-resource-tutorial.meta-row { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; color: var(--subtext); padding: .25rem .48rem; }
html.kb-page-resource-tutorial .pager, html.kb-page-resource-tutorial.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
html.kb-page-resource-tutorial .pager a, html.kb-page-resource-tutorial.pager a { border: .5px solid var(--line); border-radius: 14px; background: var(--surface-soft); padding: .7rem; color: var(--subtext); font-size: .82rem; min-height: 56px; }
html.kb-page-resource-tutorial .pager a strong, html.kb-page-resource-tutorial.pager a strong { display: block; color: var(--text); font-size: .9rem; margin-top: .1rem; }
html.kb-page-resource-tutorial .pager a.is-disabled, html.kb-page-resource-tutorial.pager a.is-disabled { opacity: .35; pointer-events: none; }
html.kb-page-resource-tutorial .footer-panel, html.kb-page-resource-tutorial.footer-panel { max-width: var(--max); margin: 0 auto 2rem; padding: 0 1.2rem; color: var(--muted); font-size: .82rem; text-align: center; }
html.kb-page-resource-tutorial .text-link, html.kb-page-resource-tutorial.text-link,
html.kb-page-resource-tutorial .article-body a[href], html.kb-page-resource-tutorial.article-body a[href] { color: var(--text); text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 1180px){
html.kb-page-resource-tutorial .doc-shell, html.kb-page-resource-tutorial.doc-shell { grid-template-columns: 260px minmax(0, 1fr); }
html.kb-page-resource-tutorial .right-rail, html.kb-page-resource-tutorial.right-rail { display: none; }
html.kb-page-resource-tutorial .dir-overview-grid, html.kb-page-resource-tutorial.dir-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
html.kb-page-resource-tutorial .doc-shell, html.kb-page-resource-tutorial.doc-shell { grid-template-columns: 1fr; padding: .9rem .85rem 2rem; }
html.kb-page-resource-tutorial .left-rail, html.kb-page-resource-tutorial.left-rail { position: static; height: auto; }
html.kb-page-resource-tutorial .left-card, html.kb-page-resource-tutorial.left-card { max-height: none; }
html.kb-page-resource-tutorial .top-button span, html.kb-page-resource-tutorial.top-button span { display: none; }
html.kb-page-resource-tutorial .article-hero h1, html.kb-page-resource-tutorial.article-hero h1 { letter-spacing: -.055em; }
html.kb-page-resource-tutorial .grid-two, html.kb-page-resource-tutorial.grid-two,
html.kb-page-resource-tutorial .grid-three, html.kb-page-resource-tutorial.grid-three,
html.kb-page-resource-tutorial .dir-overview-grid, html.kb-page-resource-tutorial.dir-overview-grid { grid-template-columns: 1fr; }
html.kb-page-resource-tutorial .folder-row, html.kb-page-resource-tutorial.folder-row { margin-left: 0; }
}
@media (max-width: 560px){
html.kb-page-resource-tutorial .brand-title, html.kb-page-resource-tutorial.brand-title { max-width: 55vw; }
html.kb-page-resource-tutorial .article-hero, html.kb-page-resource-tutorial.article-hero,
html.kb-page-resource-tutorial .article-body, html.kb-page-resource-tutorial.article-body,
html.kb-page-resource-tutorial .left-card, html.kb-page-resource-tutorial.left-card { border-radius: 20px; }
html.kb-page-resource-tutorial .step, html.kb-page-resource-tutorial.step { grid-template-columns: 36px minmax(0, 1fr); }
html.kb-page-resource-tutorial .step::before, html.kb-page-resource-tutorial.step::before { width: 36px; height: 36px; }
html.kb-page-resource-tutorial pre { font-size: .79rem; }
}
html.kb-page-resource-tutorial .nav-link, html.kb-page-resource-tutorial.nav-link {
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
gap: .65rem;
}
html.kb-page-resource-tutorial .nav-icon, html.kb-page-resource-tutorial.nav-icon {
width: 26px;
height: 26px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
background: color-mix(in srgb, var(--text) 5%, transparent);
border: .5px solid var(--line);
}
html.kb-page-resource-tutorial .nav-icon svg, html.kb-page-resource-tutorial.nav-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
html.kb-page-resource-tutorial .nav-copy, html.kb-page-resource-tutorial.nav-copy {
min-width: 0;
display: grid;
gap: .04rem;
}
html.kb-page-resource-tutorial .nav-link.is-active .nav-icon, html.kb-page-resource-tutorial.nav-link.is-active .nav-icon {
background: var(--surface-strong);
border-color: var(--line-strong);
}
html.kb-page-resource-tutorial .article-body, html.kb-page-resource-tutorial.article-body {
padding: clamp(1.25rem, 3vw, 2.15rem);
}
html.kb-page-resource-tutorial .article-body h2, html.kb-page-resource-tutorial.article-body h2 {
padding-top: .35rem;
margin-top: 2.15rem;
border-top: .5px solid var(--line);
scroll-margin-top: calc(var(--topbar) + 1.25rem);
}
html.kb-page-resource-tutorial .article-body h2:first-child, html.kb-page-resource-tutorial.article-body h2:first-child {
margin-top: .4rem;
border-top: 0;
}
html.kb-page-resource-tutorial .article-body h3, html.kb-page-resource-tutorial.article-body h3,
html.kb-page-resource-tutorial .article-body summary, html.kb-page-resource-tutorial.article-body summary {
scroll-margin-top: calc(var(--topbar) + 1.25rem);
}
html.kb-page-resource-tutorial .grid-two, html.kb-page-resource-tutorial.grid-two,
html.kb-page-resource-tutorial .grid-three, html.kb-page-resource-tutorial.grid-three {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: .9rem 0 1.2rem;
border-top: .5px solid var(--line);
border-bottom: .5px solid var(--line);
}
html.kb-page-resource-tutorial .card, html.kb-page-resource-tutorial.card {
border: 0;
border-radius: 0;
background: transparent;
padding: .9rem 0 .9rem 1rem;
border-left: 2px solid var(--line);
}
html.kb-page-resource-tutorial .card + .card, html.kb-page-resource-tutorial.card + .card {
border-top: .5px solid var(--line);
}
html.kb-page-resource-tutorial .card h3, html.kb-page-resource-tutorial.card h3 {
margin-bottom: .22rem;
}
html.kb-page-resource-tutorial .steps, html.kb-page-resource-tutorial.steps {
gap: 0;
margin: .9rem 0 1.2rem;
border-top: .5px solid var(--line);
border-bottom: .5px solid var(--line);
}
html.kb-page-resource-tutorial .step, html.kb-page-resource-tutorial.step {
border: 0;
border-radius: 0;
background: transparent;
padding: .95rem 0;
}
html.kb-page-resource-tutorial .step + .step, html.kb-page-resource-tutorial.step + .step {
border-top: .5px solid var(--line);
}
html.kb-page-resource-tutorial .step::before, html.kb-page-resource-tutorial.step::before {
background: transparent;
border: .5px solid var(--line);
}
html.kb-page-resource-tutorial .note, html.kb-page-resource-tutorial.note {
box-shadow: none;
}
html.kb-page-resource-tutorial .dir-overview-grid, html.kb-page-resource-tutorial.dir-overview-grid {
grid-template-columns: 1fr;
gap: 0;
border-top: .5px solid var(--line);
border-bottom: .5px solid var(--line);
}
html.kb-page-resource-tutorial .dir-overview-card, html.kb-page-resource-tutorial.dir-overview-card {
border: 0;
border-radius: 0;
background: transparent;
min-height: auto;
padding: .85rem 0;
}
html.kb-page-resource-tutorial .dir-overview-card + .dir-overview-card, html.kb-page-resource-tutorial.dir-overview-card + .dir-overview-card {
border-top: .5px solid var(--line);
}
html.kb-page-resource-tutorial .dir-overview-name, html.kb-page-resource-tutorial.dir-overview-name {
background: transparent;
border: .5px solid var(--line);
}
html.kb-page-resource-tutorial .article-toc a.is-current, html.kb-page-resource-tutorial.article-toc a.is-current {
background: var(--accent-soft);
color: var(--text);
font-weight: 650;
}
html.kb-page-resource-tutorial .right-card, html.kb-page-resource-tutorial.right-card {
box-shadow: none;
}
html.kb-page-resource-tutorial .meta-row strong, html.kb-page-resource-tutorial.meta-row strong {
min-width: 0;
text-align: right;
overflow-wrap: anywhere;
}
html.kb-page-resource-tutorial .pager a:hover, html.kb-page-resource-tutorial.pager a:hover {
background: var(--surface-strong);
}
@media (max-width: 1180px){
html.kb-page-resource-tutorial .right-rail, html.kb-page-resource-tutorial.right-rail {
display: block;
position: static;
height: auto;
grid-column: 1 / -1;
order: 3;
}
html.kb-page-resource-tutorial .right-card, html.kb-page-resource-tutorial.right-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
}
/* Extracted inline styles from resource/tutorial.html */
html.kb-page-resource-tutorial .kb-page-resource-tutorial-inline-001 { --level:0; }
html.kb-page-resource-tutorial .kb-page-resource-tutorial-inline-002 { --level:1; }
html.kb-page-resource-tutorial .kb-page-resource-tutorial-inline-003 { --level:2; }
html.kb-page-resource-tutorial .kb-page-resource-tutorial-inline-004 { --level:3; }
html.kb-page-resource-tutorial .kb-page-resource-tutorial-inline-005 { --level:4; }
/* JS-rendered resource utilities (moved out of HTML template strings) */
html.kb-page-resource-feedback .md-align-left { text-align: left; }
html.kb-page-resource-feedback .md-align-center { text-align: center; }
html.kb-page-resource-feedback .md-align-right { text-align: right; }
html.kb-page-resource-feedback .md-empty-text { color: var(--muted); }
html.kb-page-resource-feedback .compact-message { padding: 12px; }
html.kb-page-resource-feedback .danger-text { color: var(--red); }
html.kb-page-resource-feedback .initially-hidden { display: none; }
html.kb-page-resource-feedback .field-spaced { margin-top: 14px; }
html.kb-page-resource-tellraw .palette-color-black { background: #000000; }
html.kb-page-resource-tellraw .palette-color-dark_blue { background: #0000aa; }
html.kb-page-resource-tellraw .palette-color-dark_green { background: #00aa00; }
html.kb-page-resource-tellraw .palette-color-dark_aqua { background: #00aaaa; }
html.kb-page-resource-tellraw .palette-color-dark_red { background: #aa0000; }
html.kb-page-resource-tellraw .palette-color-dark_purple { background: #aa00aa; }
html.kb-page-resource-tellraw .palette-color-gold { background: #ffaa00; }
html.kb-page-resource-tellraw .palette-color-gray { background: #aaaaaa; }
html.kb-page-resource-tellraw .palette-color-dark_gray { background: #555555; }
html.kb-page-resource-tellraw .palette-color-blue { background: #5555ff; }
html.kb-page-resource-tellraw .palette-color-green { background: #55ff55; }
html.kb-page-resource-tellraw .palette-color-aqua { background: #55ffff; }
html.kb-page-resource-tellraw .palette-color-red { background: #ff5555; }
html.kb-page-resource-tellraw .palette-color-light_purple { background: #ff55ff; }
html.kb-page-resource-tellraw .palette-color-yellow { background: #ffff55; }
html.kb-page-resource-tellraw .palette-color-white { background: #ffffff; }