/* The Kumo menu: the one top bar on every page. Tools subtract --kumo-bar from their full-height layouts (done at build time). */
:root { --kumo-bar: 60px; }
.kumo-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 24px; height: var(--kumo-bar); padding: 0 24px;
background: rgba(255, 255, 255, .86); border-bottom: 1px solid rgba(60, 70, 120, .1); box-shadow: 0 1px 2px rgba(40, 50, 100, .04);
font: 600 15px/1 system-ui, -apple-system, "PingFang SC", "Hiragino Sans", "Segoe UI", sans-serif; color: #2b2f45; box-sizing: border-box; }
.kumo-bar * { box-sizing: border-box; }
.kumo-bar a { color: inherit; text-decoration: none; }
.kb-logo { display: flex; align-items: center; gap: 8px; flex: none; }
.kb-logo svg { width: 32px; height: 32px; }
.kb-logo b { font: 800 19px/1 "M PLUS Rounded 1c", system-ui, sans-serif; letter-spacing: .01em; }
.kb-tools { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kb-tools::-webkit-scrollbar { display: none; }
.kb-tools a, .kb-me { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; white-space: nowrap; color: #4b5068;
transition: background-color 200ms cubic-bezier(.2, .7, .2, 1), color 200ms cubic-bezier(.2, .7, .2, 1), box-shadow 200ms cubic-bezier(.2, .7, .2, 1); }
.kb-tools a i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.kb-tools a:hover, .kb-me:hover { background: #f1f3fa; color: #23263a; }
.kb-tools a[aria-current], .kb-me[aria-current] { background: #fff; color: #23263a; box-shadow: 0 1px 3px rgba(40, 50, 100, .12), inset 0 0 0 2px color-mix(in srgb, var(--c, #8a8fa6) 55%, transparent); }
.kb-right { display: flex; align-items: center; gap: 8px; flex: none; }
.kb-me { border: 1px solid rgba(60, 70, 120, .14); }
.kb-me svg { width: 16px; height: 16px; fill: #8a8fa6; }
.kb-lang { height: 40px; min-width: 56px; padding: 0 14px; border: 1px solid rgba(60, 70, 120, .14); border-radius: 999px; background: #fff; color: #4b5068;
font: 600 14px/1 system-ui, -apple-system, "PingFang SC", sans-serif; cursor: pointer; }
.kb-lang:hover { color: #23263a; background: #f7f8fc; }
.kumo-bar a:focus-visible, .kb-lang:focus-visible { outline: 2px solid #6b4fd8; outline-offset: 2px; }
@media (max-width: 1100px) { .kumo-bar { gap: 12px; padding: 0 16px; } .kb-tools a, .kb-me { padding: 0 12px; } }
@media (max-width: 760px) {
:root { --kumo-bar: 56px; }
.kumo-bar { gap: 8px; padding: 0 8px 0 12px; }
.kb-logo b, .kb-me span { display: none; }
/* the row scrolls sideways on a phone; soft edges show there is more */
.kb-tools { gap: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); padding: 0 8px; }
.kb-tools a { height: 40px; padding: 0 10px; font-size: 15px; }
.kb-tools a i { display: none; }
.kb-me { width: 40px; padding: 0; justify-content: center; }
.kb-lang { min-width: 0; width: 44px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .kb-tools a, .kb-me { transition: none; } }
/* "next step" card shown after a tool finishes something (chain.js) */
.kumo-card { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; width: 340px; max-width: calc(100vw - 32px); padding: 16px; border-radius: 16px; background: #fff; color: #23263a;
box-shadow: 0 4px 8px rgba(40, 50, 100, .06), 0 16px 48px rgba(40, 50, 100, .16); font: 400 14px/1.5 system-ui, -apple-system, "PingFang SC", "Hiragino Sans", sans-serif;
animation: kc-in 320ms cubic-bezier(.2, .7, .2, 1) both; box-sizing: border-box; }
.kumo-card * { box-sizing: border-box; }
@keyframes kc-in { from { opacity: 0; transform: translateY(8px); } }
.kc-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #8a8fa6; font: 400 20px/1 system-ui; cursor: pointer; }
.kc-x:hover { background: #f1f3fa; color: #23263a; }
.kc-top { display: flex; gap: 12px; align-items: center; padding-right: 32px; }
.kc-top img, .kc-ico { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #eef1fa repeating-conic-gradient(#e3e7f3 0 25%, #f5f7fd 0 50%) 0 0 / 12px 12px; }
.kc-ico { display: grid; place-items: center; background: linear-gradient(135deg, #e8f0ff, #fdeef4); }
.kc-ico::before { content: ""; width: 24px; height: 24px; background: #6f7aa8; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.kc-ico[data-k="audio"] { --m: url('data:image/svg+xml,'); }
.kc-ico[data-k="video"] { --m: url('data:image/svg+xml,'); }
.kc-top b { display: block; font-size: 15px; font-weight: 700; }
.kc-top span { display: block; color: #5b6078; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.kc-q { margin: 16px 0 8px; color: #5b6078; font-size: 13px; }
.kc-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kc-acts button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
background: color-mix(in srgb, var(--c) 12%, #fff); color: #23263a; font: 600 13px/1 system-ui, -apple-system, "PingFang SC", sans-serif; transition: background-color 200ms cubic-bezier(.2, .7, .2, 1); }
.kc-acts button:hover { background: color-mix(in srgb, var(--c) 22%, #fff); }
.kc-acts button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.kc-me { margin-left: auto; color: #5b6078; font-size: 13px; text-decoration: none; padding: 8px 0; }
.kc-me:hover { color: #23263a; }
.kc-acts:not(:has(button)) .kc-me { margin-left: 0; margin-top: 12px; }
@media (max-width: 640px) { .kumo-card { left: 16px; right: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .kumo-card { animation: none; } }