/* Unified free-tool workspace (home page section and /tools/<slug>/ pages) — one motion language shared with the
   rest of the site: 160ms press / 240ms state change / 420ms enter / 700ms explanation (stroke drawing).
   Every animation is one-shot and tied to something the visitor did or something that just finished.
   Nothing spins forever except real processing (data-busy) and code loading (skeleton); nothing fakes progress;
   nothing hides content until it animates. Rest states are the final states, so reduced motion and no-JS show everything. */
.kwx{--x-ink:#291532;--x-purple:#613185;--x-purple-deep:#3f1f58;--x-line:#d6c5df;--x-line-strong:#a78db9;--x-paper:#fcf9ff;--x-soft:#eee3f6;--x-warm:#f3b562;--x-warm-deep:#d8972b;--x-warm-soft:#fff4df;--x-ok:#32724c;--x-ok-soft:#e9f7ec;--x-bad:#a43428;--x-bad-soft:#fff0e9;--x-muted:#655272;--x-ease:cubic-bezier(.16,1,.3,1);--x-press:160ms;--x-state:240ms;--x-enter:420ms;--x-draw:700ms;
 color:var(--x-ink);margin:0 auto 80px;padding:clamp(20px,4vw,60px);max-width:1320px;background:linear-gradient(130deg,#f6edff,#fffaf1);border:1px solid var(--x-line);border-radius:28px;position:relative;overflow:clip;scroll-margin-top:100px}
.kwx *{box-sizing:border-box;min-width:0}.kwx [hidden]{display:none!important}
.kwx a,.kwx button,.kwx input,.kwx select,.kwx textarea,.kwx summary{touch-action:manipulation;-webkit-tap-highlight-color:#bea0dd44}
.kwx :focus-visible{outline:3px solid #733f9c;outline-offset:4px;border-radius:6px}
.kwx p{line-height:1.8}
.kwx .ks-anchor{display:block;height:0;scroll-margin-top:100px}

/* ---------- intro & figures ---------- */
.kwx-intro{max-width:880px;margin-bottom:8px}
.kwx-how{max-width:880px;margin:36px 0 8px;padding-top:24px;border-top:1px solid var(--x-line)}
.kwx-how>p{margin:0 0 10px}
.kwx .ks-kicker{color:var(--x-purple);font-size:12px;letter-spacing:.14em;margin-bottom:14px!important}
.kwx h2{font-size:clamp(30px,4vw,58px);line-height:1.3;letter-spacing:-.03em;margin:12px 0;position:relative;z-index:0}
.kwx h2 em{color:var(--x-purple);font-style:normal;position:relative;display:inline-block}
.kwx h2 em::after{content:'';position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.3em;background:linear-gradient(90deg,#f6cf86,#fde9c3);border-radius:3px;z-index:-1;transform-origin:left center}
.kwx-intro.kwx-seen h2 em::after{animation:kwx-sweep var(--x-draw) var(--x-ease) .15s both}
.kwx-statement{font-size:clamp(18px,2vw,25px);font-weight:750;line-height:1.6}
.kwx-figure{margin:24px 0 8px;padding:0}
.kwx-figure figcaption{font-size:13px;font-weight:700;color:var(--x-purple);margin-bottom:10px}
.kwx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.kwx-step{display:grid;grid-template-columns:52px auto 1fr;align-items:center;gap:12px;padding:14px 16px;background:#ffffffb8;border:1px solid var(--x-line);border-radius:14px;font-size:14px;transition:border-color var(--x-state),transform var(--x-state) var(--x-ease),box-shadow var(--x-state)}
.kwx-step>b{color:var(--x-purple);font:700 18px/1 ui-monospace,SFMono-Regular,monospace}
.kwx-step>span{display:grid;gap:3px}.kwx-step strong{font-size:15px;line-height:1.4}.kwx-step small{font-size:12px;color:var(--x-muted);line-height:1.5}
.kwx-step svg{width:52px;height:40px;fill:none;stroke:var(--x-purple);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kwx-step svg rect{stroke:var(--x-line-strong)}
.kwx-step .kwx-fig-accent{stroke:var(--x-warm-deep)}
.kwx-seen .kwx-step{animation:kwx-rise var(--x-enter) var(--x-ease) both}
.kwx-seen .kwx-step:nth-child(2){animation-delay:90ms}.kwx-seen .kwx-step:nth-child(3){animation-delay:180ms}
.kwx-seen .kwx-fig-line,.kwx-seen .kwx-fig-accent{stroke-dasharray:160;animation:kwx-draw var(--x-draw) var(--x-ease) both}
.kwx-seen .kwx-fig-accent{animation-delay:.35s}
.kwx-scope{font-size:14px;color:var(--x-muted);margin:0}
.kwx-scope a{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;color:var(--x-purple);font-weight:700;text-decoration:underline;text-underline-offset:5px}
.kwx-scope a span{transition:transform var(--x-state) var(--x-ease)}

/* input → check → exception → output: the one diagram every tool follows (text is HTML, so it stays readable at 390px) */
.kwx-flow{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;align-items:stretch;gap:0;margin:0}
.kwx-flow-node{position:relative;display:grid;grid-template-rows:auto auto 1fr;justify-items:start;gap:6px;padding:14px 14px 12px;background:#fff;border:1px solid var(--x-line);border-radius:14px;font-size:13px;line-height:1.5;transition:border-color var(--x-state),transform var(--x-state) var(--x-ease)}
.kwx-flow-node svg{width:30px;height:30px;fill:none;stroke:var(--x-purple);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kwx-flow-node b{font-size:14px;color:var(--x-purple-deep)}
.kwx-flow-node small{font-size:12px;color:var(--x-muted);line-height:1.5}
.kwx-flow-node i{position:absolute;top:10px;right:10px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--x-warm-soft);color:#7a4a05}
.kwx-flow-node[data-step=exception]{border-color:#efcf97;background:#fffcf5}
.kwx-flow-node[data-step=exception] svg{stroke:var(--x-warm-deep)}
.kwx-flow-node[data-step=output] svg .kwx-draw-accent{stroke:var(--x-ok)}
.kwx-flow-link{position:relative;align-self:center;height:2px;background:var(--x-line-strong);transform-origin:left center}
.kwx-flow-link::after{content:'';position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--x-line-strong);border-right:2px solid var(--x-line-strong);transform:rotate(45deg)}
.kwx-seen .kwx-flow-node{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:calc(var(--i,0)*120ms)}
.kwx-seen .kwx-flow-link{animation:kwx-sweep var(--x-state) var(--x-ease) both;animation-delay:calc(var(--i,0)*120ms + 60ms)}
.kwx-seen .kwx-flow .kwx-draw{stroke-dasharray:120;animation:kwx-draw-120 var(--x-draw) var(--x-ease) both;animation-delay:calc(var(--i,0)*120ms + 120ms)}
.kwx-flow-compact{margin:14px 0 4px}
.kwx-flow-compact .kwx-flow-node{padding:10px 12px;gap:4px;grid-template-rows:auto auto;grid-template-columns:24px 1fr;align-items:center}
.kwx-flow-compact .kwx-flow-node svg{width:22px;height:22px;grid-row:1/3}
.kwx-flow-compact .kwx-flow-node b{font-size:12px}.kwx-flow-compact .kwx-flow-node small{font-size:11px}.kwx-flow-compact .kwx-flow-node i{display:none}
.kwx-tool[data-enter] .kwx-flow-compact .kwx-flow-node{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:calc(var(--i,0)*70ms)}

/* after the consult button: the owner's four-step process */
.kwx-process{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;counter-reset:kwx-process}
.kwx-process::before{content:'';position:absolute;left:12px;right:12px;top:11px;height:2px;background:linear-gradient(90deg,var(--x-purple),var(--x-warm));transform-origin:left center}
.kwx-process li{position:relative;padding-top:28px;font-size:13px;line-height:1.6;counter-increment:kwx-process}
.kwx-process-dot{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--x-purple);box-shadow:0 0 0 4px #fff}
.kwx-process-dot::after{content:counter(kwx-process,decimal-leading-zero);position:absolute;inset:0;display:grid;place-items:center;font:700 10px/1 ui-monospace,SFMono-Regular,monospace;color:var(--x-purple)}
.kwx-process b{display:block;font-size:14px;margin-bottom:2px}
.kwx-process small{font-size:12px;color:var(--x-muted);display:block}
.kwx-seen .kwx-process::before{animation:kwx-sweep var(--x-draw) var(--x-ease) both}
.kwx-seen .kwx-process li{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:calc(var(--i,0)*140ms + 120ms)}

/* ---------- finder ---------- */
.kwx-finder{background:#ffffffc9;padding:24px;border:1px solid var(--x-line);border-radius:18px;margin:24px 0;transition:box-shadow var(--x-state),border-color var(--x-state)}
.kwx-finder:focus-within{border-color:var(--x-line-strong);box-shadow:0 10px 30px #29153212}
.kwx-finder>label{font-weight:750;display:block;margin-bottom:8px}
.kwx input,.kwx select,.kwx textarea{font:inherit;font-size:16px;color:var(--x-ink);border:1px solid #ac94be;border-radius:8px;background:#fff;min-height:46px;padding:10px 12px;width:100%;line-height:1.6;transition:border-color var(--x-state),box-shadow var(--x-state),background-color var(--x-state)}
.kwx input:focus,.kwx select:focus,.kwx textarea:focus{border-color:var(--x-purple);box-shadow:0 0 0 4px #61318522;outline:none}
.kwx input:focus-visible,.kwx select:focus-visible,.kwx textarea:focus-visible{outline:none}
.kwx textarea{resize:vertical;min-height:110px}
.kwx input[type=checkbox]{width:20px;min-height:20px;height:20px;accent-color:var(--x-purple);transition:transform var(--x-press)}
.kwx input[type=checkbox]:active{transform:scale(.85)}
.kwx input[type=file]{max-width:100%;font-size:14px}
.kwx input[type=color]{width:46px;min-width:46px;height:46px;padding:4px;cursor:pointer}
.kwx-search-box{position:relative}
.kwx-search-box input{padding-left:44px}
.kwx-search-icon{position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-10px;border:2px solid var(--x-line-strong);border-radius:50%;pointer-events:none;transition:border-color var(--x-state),transform var(--x-state) var(--x-ease)}
.kwx-search-icon::after{content:'';position:absolute;right:-7px;bottom:-6px;width:8px;height:2px;background:var(--x-line-strong);transform:rotate(45deg);border-radius:2px;transition:background-color var(--x-state)}
.kwx-search-box:focus-within .kwx-search-icon{border-color:var(--x-purple);transform:scale(1.1) rotate(-8deg)}
.kwx-search-box:focus-within .kwx-search-icon::after{background:var(--x-purple)}
.kwx-categories{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kwx button{border:1px solid var(--x-line-strong);border-radius:9px;min-height:44px;padding:10px 15px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.5;color:var(--x-ink);background:#fff;cursor:pointer;transition:background-color var(--x-state),border-color var(--x-state),color var(--x-state),transform var(--x-press) var(--x-ease),box-shadow var(--x-state)}
.kwx button:active:not(:disabled){transform:translateY(1px) scale(.985);box-shadow:none}
.kwx button:disabled{opacity:.55;cursor:not-allowed}
.kwx button:focus-visible{box-shadow:0 0 0 7px #cbb0df55}
.kwx-categories button{display:inline-flex;align-items:center;gap:6px}
.kwx-categories button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.kwx-categories button b{display:inline-block;min-width:22px;margin-left:2px;padding:0 6px;border-radius:999px;background:var(--x-soft);color:var(--x-purple-deep);font-size:12px;font-weight:700;line-height:20px;text-align:center;transition:background-color var(--x-state),color var(--x-state)}
.kwx-categories [aria-pressed=true]{background:var(--x-purple);color:#fff;border-color:var(--x-purple);box-shadow:0 6px 16px #61318533}
.kwx-categories [aria-pressed=true] b{background:#ffffff2e;color:#fff}
.kwx-categories [aria-pressed=true] b::before{content:'✓ '}
.kwx #kwx-count{font-size:13px;margin:16px 0 0;color:var(--x-muted)}
.kwx #kwx-count[data-tick]{animation:kwx-fade var(--x-state) ease-out}

/* ---------- grid & cards ---------- */
.kwx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kwx-card{color:inherit!important;background:#fff;border:1px solid var(--x-line);border-radius:16px;padding:22px 24px 20px;display:flex;flex-direction:column;position:relative;overflow:hidden;text-decoration:none;scroll-margin-top:100px;transition:border-color var(--x-state),transform var(--x-state) var(--x-ease),box-shadow var(--x-state)}
.kwx-card::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--x-purple),var(--x-warm));transform:scaleX(0);transform-origin:left center;transition:transform var(--x-enter) var(--x-ease)}
.kwx-card:focus-visible::before,.kwx-card[aria-current=true]::before{transform:none}
.kwx-grid.kwx-reveal .kwx-card{animation:kwx-card-in var(--x-enter) var(--x-ease) both;animation-delay:calc(min(var(--i,0),11)*28ms)}
.kwx-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700}
.kwx-card-cat{display:inline-flex;align-items:center;gap:6px;color:var(--x-purple)}
.kwx-card-cat svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kwx-card-kind{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--x-ok-soft);color:#235a37;white-space:nowrap}
.kwx-card-kind[data-kind=demo]{background:var(--x-warm-soft);color:#7a4a05}
.kwx-card h3{font-size:20px;line-height:1.5;margin:16px 0 8px}
.kwx-card p{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 20px}
.kwx-card-body{display:block;min-width:0}
/* Per-tool visual: a 3:2 function image cropped to a 140px band (no text in the pixels — the title and purpose stay as
   HTML). Lazy-loaded; hidden cards never request it. The same file is reused on /tools/<slug>/. */
.kwx-card-visual{display:block;margin:14px 0 0;height:140px;border-radius:10px;overflow:hidden;background:var(--x-soft);border:1px solid var(--x-line)}
.kwx-card-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform var(--x-enter) var(--x-ease)}
.kwx-card[data-visual] h3{margin-top:14px}
.kwx-visual-note{font-size:13px;color:var(--x-muted);margin:4px 0 0}
.kwx-card-action{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:750;color:var(--x-purple)}
.kwx-arrow{display:inline-block;transition:transform var(--x-state) var(--x-ease)}
.kwx-card[aria-current=true]{border-color:var(--x-purple);box-shadow:0 0 0 3px #61318522}
/* Back from a panel: the card you came from is highlighted once (focus moved there too) so the list keeps its context. */
.kwx-card[data-kwx-return]{border-color:var(--x-purple);animation:kwx-return 1400ms var(--x-ease) both}
.kwx-card[aria-current=true] .kwx-card-action>span:first-child::after{content:' ・ 上で開いています';font-weight:600;color:var(--x-muted)}
.kwx-card:active{transform:translateY(1px) scale(.99)}
.kwx-more{display:flex!important;align-items:center;gap:10px;margin:24px auto!important;padding:12px 22px!important}
.kwx-more::after{content:'';width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--x-state) var(--x-ease)}
.kwx-more[aria-expanded=true]::after{transform:rotate(-135deg) translate(-2px,-1px)}
.kwx-empty{padding:28px;border:1px dashed var(--x-line-strong);border-radius:14px;background:#ffffff80;text-align:center;animation:kwx-fade var(--x-state) ease-out}
.kwx-empty p{margin:0 0 14px}
.kwx[data-kwx-open]:not([data-kwx-open=""]) .kwx-grid{opacity:.92}
.kwx-noscript{padding:16px 20px;border:1px dashed var(--x-line-strong);border-radius:12px;background:#fff;margin:16px 0}

/* ---------- stage & tool panel (native and expansion share the same chrome) ---------- */
.kwx-stage{margin:0 0 24px;scroll-margin-top:100px}
.kwx-tool{margin:0 0 28px;padding:clamp(16px,3vw,32px);background:var(--x-paper);border:2px solid var(--x-purple);border-radius:20px;scroll-margin-top:100px;box-shadow:0 18px 50px #29153214}
.kwx-tool[data-enter]{animation:kwx-panel-in var(--x-enter) var(--x-ease) both}
.kwx-tool-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;position:relative;padding-bottom:14px;margin-bottom:12px}
.kwx-tool-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--x-purple),var(--x-warm) 70%,transparent);transform-origin:left center}
.kwx-tool[data-enter] .kwx-tool-head::after{animation:kwx-sweep var(--x-draw) var(--x-ease) .1s both}
.kwx-tool-title{display:grid;gap:6px}
.kwx-tool-cat{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--x-purple)}
.kwx-tool-cat svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kwx-tool-cat-root,.kwx-tool-cat-sep{color:var(--x-muted);font-weight:600}
.kwx-tool-cat-kind{color:var(--x-muted);font-weight:600}
.kwx-tool-head h3{font-size:clamp(22px,3vw,32px);margin:0;line-height:1.4}
.kwx-tool-head h3:focus{outline:none}
.kwx-tool-nav{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;justify-content:flex-end}
.kwx-tool-nav a,.kwx-tool-nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--x-line-strong);border-radius:9px;background:#fff;color:var(--x-ink);font-size:14px;font-weight:600;text-decoration:none;line-height:1.5;transition:background-color var(--x-state),border-color var(--x-state),color var(--x-state)}
.kwx-close-arrow{display:inline-block;transition:transform var(--x-state) var(--x-ease)}
.kwx-page-link{color:var(--x-purple)!important}
.kwx-purpose{font-size:16px;margin:0 0 8px}
.kwx-limits,.kwx-boundary{font-size:13px;color:var(--x-muted);overflow-wrap:anywhere}
.kwx-loading-line{padding:14px 16px;background:#ebe4f1;border-radius:8px;font-size:14px;border-left:3px solid var(--x-purple);margin:12px 0}
.kwx-loading-line[data-error=true]{background:var(--x-bad-soft);border-left-color:var(--x-bad);color:#82231a}
.kwx-loading-line button{margin-left:8px}
.kwx-native-host{display:block;max-width:100%;border:1px solid var(--x-line);border-radius:14px;overflow:hidden;background:#fff;margin:12px 0 0}
/* The component lives in a shadow root, so the host's light DOM is always empty: visibility must follow the panel's
   data-load-state (set by the controller), never :empty. Hidden until a mount starts and after a failed mount. */
.kwx-tool-native:not([data-load-state]) .kwx-native-host,.kwx-tool-native[data-load-state=error] .kwx-native-host{display:none}
.kwx-tool-native[data-load-state=loading] .kwx-native-host{min-height:120px;background:linear-gradient(90deg,#f3ecf8 0 40%,#faf6fd 50%,#f3ecf8 60% 100%);background-size:220% 100%;animation:kwx-sheen 1.2s linear infinite}
.kwx details{border-top:1px solid var(--x-line);padding:12px 0;margin:16px 0}
.kwx summary{cursor:pointer;min-height:44px;padding:10px 0 10px 26px;font-weight:650;list-style:none;position:relative;border-radius:8px;transition:background-color var(--x-state),color var(--x-state)}
.kwx summary::-webkit-details-marker{display:none}
.kwx summary::before{content:'';position:absolute;left:8px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--x-purple);border-bottom:2px solid var(--x-purple);transform:rotate(-45deg);transition:transform var(--x-state) var(--x-ease)}
.kwx details[open]>summary::before{transform:rotate(45deg);margin-top:-8px}
.kwx details[open]>:not(summary){animation:kwx-fade-down 280ms var(--x-ease)}
.kwx details li{margin:10px 0;line-height:1.7}
.kwx-actions,.kwx-exports,.kwx-tool-actions{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.kwx-tool-actions{margin:14px 0 0}
.kwx-actions .kwx-sample{background:#e9d7f6;border-color:#9163af}
.kwx-share[data-done],.kwx-export[data-done]{background:var(--x-ok-soft);border-color:var(--x-ok);color:#1f5a35;animation:kwx-pop var(--x-enter) var(--x-ease)}
.kwx-share[data-done]::after,.kwx-copy[data-done]::after{content:' ✓'}
/* Sample just filled the form: one soft highlight so the eye finds what changed (not a loop). */
.kwx-fields[data-filled]{animation:kwx-filled 900ms var(--x-ease)}
.kwx-file-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.kwx-file-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--x-soft);border-radius:8px;font-size:14px;overflow-wrap:anywhere}
.kwx-file-list .kwx-file-empty{background:transparent;color:var(--x-muted);padding-left:0}
.kwx-file-list .kwx-remove{align-self:center;flex-shrink:0}
.kwx-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kwx-fields>div:has(textarea),.kwx-fields>div:has(fieldset){grid-column:1/-1}
.kwx-field{display:flex;flex-direction:column;gap:7px}
.kwx-field label,.kwx legend{font-size:14px;font-weight:700;line-height:1.5;transition:color var(--x-state)}
.kwx-field:focus-within>label{color:var(--x-purple)}
.kwx small{font-size:12px;line-height:1.6;overflow-wrap:anywhere;color:var(--x-muted)}
.kwx-field.kwx-check{flex-direction:row-reverse;align-items:center;justify-content:flex-end}
.kwx-field.kwx-check label{font-weight:500}
.kwx-color{display:flex;gap:8px;align-items:center}
.kwx-color input[type=text]{flex:1 1 120px}
.kwx fieldset{border:1px solid var(--x-line);padding:16px;border-radius:12px;margin:0;transition:border-color var(--x-state)}
.kwx fieldset:focus-within{border-color:var(--x-line-strong)}
.kwx legend{padding:0 6px}
.kwx-column-checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.kwx-column-checks>label{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:44px;border-radius:8px;background:var(--x-soft);font-size:14px;border:1px solid transparent;transition:background-color var(--x-state),border-color var(--x-state)}
.kwx-column-checks>label:has(input:checked){background:#e2cff2;border-color:var(--x-line-strong)}
.kwx-file{display:flex;gap:8px;flex-wrap:wrap}
.kwx-file input{flex:1 1 220px}
.kwx-file select{flex:0 0 145px}
.kwx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;background:#fff;border:1px solid var(--x-line);border-radius:10px;margin:0 0 12px;transition:border-color var(--x-state),box-shadow var(--x-state)}
.kwx-row:focus-within{border-color:var(--x-line-strong);box-shadow:0 6px 18px #2915320f}
.kwx-row[data-enter]{animation:kwx-rise var(--x-enter) var(--x-ease) both}
.kwx-row-no{grid-column:1/-1;font-size:12px;color:var(--x-purple);margin:0!important;font-weight:700}
.kwx-row:has(textarea){grid-template-columns:1fr}
.kwx-remove{font-size:12px!important;align-self:end}
.kwx-add{margin-top:4px}
.kwx button.kwx-run{display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;font-weight:750;color:#fff;background:var(--x-purple);border-color:var(--x-purple);padding:16px 24px;min-height:56px;margin:24px 0 6px;position:relative;overflow:hidden;box-shadow:0 8px 22px #61318540}
/* A result just went stale: one warm pulse on the run button (fresh → stale transition only, never per keystroke). */
.kwx button.kwx-run[data-nudge]{animation:kwx-nudge-run 900ms var(--x-ease)}
.kwx-run-arrow{display:inline-block;transition:transform var(--x-state) var(--x-ease)}
.kwx-tool[data-busy=true] .kwx-run{cursor:progress;background-image:linear-gradient(100deg,transparent 0 35%,#ffffff2e 50%,transparent 65% 100%);background-size:220% 100%;animation:kwx-sheen 1.1s linear infinite}
.kwx-tool[data-busy=true] .kwx-run-arrow{display:none}
.kwx-tool[data-busy=true] .kwx-run::after{content:'';display:inline-block;width:16px;height:16px;border:2px solid #ffffff66;border-top-color:#fff;border-radius:50%;animation:kwx-spin .7s linear infinite}
.kwx-status{padding:14px 16px 14px 42px;background:#ebe4f1;border-radius:8px;font-size:14px;border-left:3px solid var(--x-purple);position:relative;transition:background-color var(--x-state),border-color var(--x-state),color var(--x-state)}
.kwx-status::before{content:'i';position:absolute;left:14px;top:14px;width:20px;height:20px;border-radius:50%;background:var(--x-purple);color:#fff;font:700 12px/20px ui-monospace,monospace;text-align:center}
.kwx-status[data-tick]{animation:kwx-status-in 320ms var(--x-ease)}
.kwx-status[data-kind=ok]{background:var(--x-ok-soft);border-left-color:var(--x-ok);color:#1f5a35}
.kwx-status[data-kind=ok]::before{content:'✓';background:var(--x-ok)}
.kwx-status[data-error=true],.kwx-warning{background:var(--x-bad-soft);border-left:3px solid var(--x-bad);color:#82231a;padding:14px 16px;border-radius:8px}
.kwx-status[data-error=true]{padding-left:42px}
.kwx-status[data-error=true]::before{content:'!';background:var(--x-bad)}
.kwx-status[data-error=true][data-tick]{animation:kwx-nudge 360ms var(--x-ease)}
.kwx-tool[data-busy=true] .kwx-status{border-left-color:var(--x-warm)}
.kwx-tool[data-busy=true] .kwx-status::before{content:'…';background:var(--x-warm-deep)}

/* ---------- output ---------- */
.kwx-output{scroll-margin-top:100px;position:relative;border-radius:14px;transition:opacity var(--x-state),filter var(--x-state)}
.kwx-output:focus{outline:none}
.kwx-output[data-enter]{animation:kwx-ring 900ms ease-out}
.kwx-output[data-stale=true]{opacity:.62;filter:saturate(.45)}
.kwx-output[data-stale=true]::before{content:'前の入力の結果（古い）';position:sticky;top:8px;z-index:2;display:inline-block;margin:16px 0 -8px;padding:6px 12px;border-radius:999px;background:#5c4d6b;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.kwx-idle{margin-top:18px;padding:22px 24px;border:1px dashed var(--x-line-strong);border-radius:14px;background:#ffffff8c;display:grid;grid-template-columns:96px 1fr;gap:4px 18px;align-items:center;color:var(--x-muted)}
.kwx-idle svg{grid-row:1/3;width:96px;height:52px;fill:none;stroke:var(--x-line-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kwx-idle strong{font-size:14px;color:var(--x-ink)}
.kwx-idle p{margin:0;font-size:13px;line-height:1.6}
.kwx-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:24px}
.kwx-metric{padding:18px;border:1px solid var(--x-line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere;border-top:3px solid var(--x-line);transition:transform var(--x-state) var(--x-ease),box-shadow var(--x-state)}
.kwx-output[data-enter] .kwx-metric{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:calc(min(var(--i,0),7)*45ms)}
.kwx-metric span{font-size:12px;font-weight:650}
.kwx-metric strong{font-size:clamp(19px,2.5vw,29px);font-variant-numeric:tabular-nums;line-height:1.3}
.kwx-metric[data-tone=ok]{border-top-color:var(--x-ok)}.kwx-metric[data-tone=warn]{border-top-color:var(--x-warm-deep)}.kwx-metric[data-tone=bad]{border-top-color:var(--x-bad)}
.kwx [data-tone=bad]{color:#9a231b}.kwx [data-tone=warn]{color:#825308}.kwx [data-tone=muted]{color:var(--x-muted)}.kwx td[data-tone=ok]{color:#25613d;font-weight:700}
.kwx-output[data-enter] .kwx-warning{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:120ms}
.kwx-exports{margin:22px 0}
.kwx-export{display:inline-flex;align-items:center;gap:8px}
.kwx-export-icon{display:inline-block;transition:transform var(--x-state) var(--x-ease)}
.kwx-export[data-done] .kwx-export-icon{animation:kwx-drop var(--x-enter) var(--x-ease)}
.kwx-output[data-enter] .kwx-exports{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:200ms}
.kwx-result-section{margin:24px 0}
.kwx-output[data-enter] .kwx-result-section{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:calc(240ms + min(var(--i,0),5)*70ms)}
.kwx-result-section h4{font-size:17px;margin:14px 0;padding-left:12px;border-left:3px solid var(--x-warm)}
/* Result tables scroll inside a box capped relative to the viewport (previews are at most 200 rows, so the page never
   grows by thousands of rows, and the box never swallows the whole screen on a short device). Both axes stay on the
   same scroll container on purpose: overflow-x:auto with overflow-y:visible would compute to auto anyway. */
.kwx-table-wrap{overflow:auto;max-height:min(520px,70vh);border:1px solid var(--x-line);border-radius:10px;overscroll-behavior-x:contain;background:linear-gradient(90deg,#fff 30%,#fff0) left/48px 100% no-repeat local,linear-gradient(270deg,#fff 30%,#fff0) right/48px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,#2915322b,#0000) left/16px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,#2915322b,#0000) right/16px 100% no-repeat scroll,#fff}
.kwx-table-wrap:focus-visible{outline-offset:2px}
.kwx-table-hint{display:none;margin:6px 0 0;font-size:12px;color:var(--x-muted)}
.kwx-table-hint::before{content:'↔';margin-right:6px;color:var(--x-warm-deep);font-weight:700}
.kwx-table-wrap[data-overflow=x]+.kwx-table-hint{display:block}
.kwx table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.6;white-space:normal}
.kwx th,.kwx td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid #e4d8eb;min-width:100px;max-width:350px;overflow-wrap:anywhere;background:transparent}
.kwx th{position:sticky;top:0;background:#e9dbf3;font-weight:700;z-index:1}
.kwx tbody tr{transition:background-color var(--x-state)}
.kwx tr:last-child td{border-bottom:0}
.kwx td.kwx-url{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;overflow-wrap:normal;word-break:normal;min-width:220px;max-width:420px;color:#3f2a52}
.kwx pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;border:1px solid var(--x-line);background:#fff;border-radius:10px;max-height:500px;overflow:auto;font-family:inherit;font-size:14px;line-height:1.8}
.kwx-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important}
.kwx-swatch,.kwx-preview{padding:24px;border:1px solid var(--x-line);border-radius:10px;overflow-wrap:anywhere;transition:background-color var(--x-enter),color var(--x-enter)}
.kwx-preview{background:#fff}
.kwx-preview strong,.kwx-preview small{display:block}
.kwx-preview strong{color:#512398;font-size:22px;margin:10px 0}
.kwx-preview[data-kind=card]{border-radius:14px;border-color:var(--x-line-strong)}
.kwx-preview[data-kind=card] strong{color:var(--x-ink);font-size:19px}
.kwx-notes{margin-top:20px}
/* QR preview: an inline SVG built from the module matrix (numbers only); the encoded text is printed as text below it. */
.kwx-qr{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:18px;align-items:start;padding:20px;border:1px solid var(--x-line);border-radius:12px;background:#fff}
.kwx-qr svg{width:100%;height:auto;max-width:240px;display:block;border:1px solid var(--x-line);border-radius:6px;background:#fff}
.kwx-qr-text{min-width:0;display:grid;gap:6px}
.kwx-qr-text pre{margin:0;max-height:160px;padding:12px 14px;font-size:13px}
/* Image before/after pairs (object URLs owned by the panel) */
.kwx-images{display:grid;gap:14px}
.kwx-image-pair{margin:0;padding:16px;border:1px solid var(--x-line);border-radius:12px;background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kwx-image-pair figcaption{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;overflow-wrap:anywhere}
.kwx-image-pair figcaption span{color:var(--x-muted)}
.kwx-image-side{display:grid;gap:6px;min-width:0}
.kwx-image-side b{font-size:12px;color:var(--x-purple)}
.kwx-image-side img{width:100%;height:auto;max-height:260px;object-fit:contain;background:repeating-conic-gradient(#f3eef7 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid var(--x-line);border-radius:8px}
.kwx-image-side small{font-variant-numeric:tabular-nums}
/* Form preview: real controls, no form element, nothing is posted anywhere */
.kwx-form-preview{padding:20px;border:1px dashed var(--x-line-strong);border-radius:12px;background:#fff;display:grid;gap:16px}
.kwx-form-preview-title{margin:0;font-weight:750;font-size:17px}
.kwx-form-preview .kwx-field{gap:6px}
.kwx-form-preview fieldset{display:grid;gap:8px}
.kwx-form-preview .kwx-check{display:flex;align-items:center;gap:8px;min-height:44px}
.kwx-form-preview .kwx-form-preview-send{justify-self:start}
.kwx-form-preview .kwx-status{margin:0}
.kwx-consult-inline{margin:28px 0 8px;padding:22px 24px;border-radius:14px;background:#2c173c;color:#f4eff8;display:flex;justify-content:space-between;align-items:center;gap:24px}
.kwx-output[data-enter] .kwx-consult-inline{animation:kwx-rise var(--x-enter) var(--x-ease) both;animation-delay:560ms}
.kwx-consult-inline strong{display:block;font-size:19px;color:#defba0;margin-bottom:6px}
.kwx-consult-inline p{margin:0;font-size:14px;line-height:1.75;color:#e9e0f2}
.kwx-consult-link{flex-shrink:0;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:14px 20px;border-radius:8px;background:#defba0;color:#23132d!important;font-weight:750;font-size:15px;text-decoration:none;transition:transform var(--x-state) var(--x-ease),box-shadow var(--x-state),background-color var(--x-state)}
.kwx-consult-link:active{transform:translateY(2px) scale(.985)}
.kwx-consult-link:focus-visible{outline-color:#fff}
.kwx-loading{padding:26px 30px;border:1px solid var(--x-line);border-radius:14px;background:var(--x-paper);animation:kwx-fade var(--x-state) ease-out;margin-bottom:24px}
.kwx-loading p{margin:0 0 14px;font-weight:650;color:var(--x-purple-deep)}
.kwx-loading p[data-error=true]{color:#82231a}
.kwx-skeleton{display:grid;gap:10px}
.kwx-skeleton span{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#ece2f4 0 40%,#f7f0fb 50%,#ece2f4 60% 100%);background-size:220% 100%;animation:kwx-sheen 1.2s linear infinite}
.kwx-skeleton span:nth-child(1){width:38%}.kwx-skeleton span:nth-child(2){width:72%}.kwx-skeleton span:nth-child(3){width:55%}
.kwx-loading button{margin-top:8px}
.kwx-consult{margin-top:36px;padding-top:24px;border-top:1px solid var(--x-line);display:flex;gap:24px;justify-content:space-between;align-items:flex-start}
.kwx-consult strong{font-size:22px}
.kwx-consult>div{flex:1 1 auto;min-width:0}
.kwx-consult>a{flex-shrink:0;margin-top:4px}
.kwx-assurance{margin-top:28px;padding:24px;border:1px solid var(--x-line);background:#fff;border-radius:14px}
.kwx-assurance h3{font-size:20px}
.kwx-assurance p{font-size:14px}
.kwx .kw-workspace-note{font-size:13px;color:var(--x-muted);margin:18px 0 0}

/* ---------- per-tool page (/tools/<slug>/) ---------- */
.kwx-page{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,60px) 60px}
.kwx-page .kwx{margin:24px 0 36px;max-width:none}
.kwx-crumb{font-size:13px;margin:22px 0 10px;color:#62536c}
.kwx-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;align-items:center}
.kwx-crumb li{display:inline-flex;align-items:center;min-height:44px}
.kwx-crumb li+li::before{content:'›';margin:0 8px;color:#a78db9}
.kwx-crumb a{color:#4f256a;text-decoration:underline;text-underline-offset:4px}
.kwx-page-hero{padding:8px 0 28px;border-bottom:1px solid #d9cfe0;margin-bottom:28px}
/* Tool page: a small side figure (same file as the home card). It never sits between the heading and the tool. */
.kwx-page-hero-with-visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:16px 40px;align-items:start}
.kwx-page-hero-copy{min-width:0}
.kwx-page-visual{margin:6px 0 0;display:grid;gap:6px}
.kwx-page-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:1px solid #d6c5df;background:#eee3f6}
.kwx-page-visual figcaption{font-size:12px;line-height:1.6;color:#655272}
.kwx-page-hero .ks-kicker{color:#613185;font-size:12px;letter-spacing:.14em;margin-bottom:12px!important}
.kwx-page-hero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.3;letter-spacing:-.03em;margin:0 0 14px}
.kwx-page-lead{font-size:clamp(16px,1.6vw,19px);max-width:800px;line-height:1.8;margin:0 0 16px}
.kwx-page-facts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kwx-page-facts li{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#eee3f6;color:#3f1f58}
/* Search phrases stay in the initial HTML for SEO, but read as plain muted text with separators, not as buttons. */
.kwx-page-intents{font-size:14px;line-height:1.8;margin:0 0 20px;color:#655272}
.kwx-page-intents b{margin-right:4px;color:#3f1f58}
.kwx-page-intents span{display:inline;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:inherit;color:inherit}
.kwx-page-intents span+span::before{content:"\30FB";margin:0 2px;color:#a08fae}
.kwx-page-actions{display:flex;flex-wrap:wrap;gap:10px}
.kwx-page-actions .ks-button-outline{border-color:#8c7ba8;color:#3b1f51!important}
.kwx-page-section{margin:0 0 30px}
.kwx-page-section h2{font-size:clamp(20px,2.2vw,26px);line-height:1.4;margin:0 0 12px;padding-left:12px;border-left:3px solid #f3b562}
.kwx-page-section h3{font-size:16px;margin:0 0 6px;color:#613185}
.kwx-page-section p{line-height:1.8;max-width:860px}
.kwx-page-io>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kwx-page-io>div>div{padding:18px 20px;background:#fff;border:1px solid #d6c5df;border-radius:14px}
.kwx-page-sample{font-size:13px;color:#655272}
.kwx-page-steps{margin:0;padding-left:0;list-style:none;counter-reset:kwx-page-step;display:grid;gap:10px;max-width:860px}
.kwx-page-steps li{position:relative;padding:12px 16px 12px 54px;background:#fff;border:1px solid #d6c5df;border-radius:12px;line-height:1.7;counter-increment:kwx-page-step}
.kwx-page-steps li::before{content:counter(kwx-page-step,decimal-leading-zero);position:absolute;left:16px;top:12px;font:700 15px/1.7 ui-monospace,SFMono-Regular,monospace;color:#613185}
.kwx-page-h2{font-size:clamp(20px,2.2vw,26px);margin:0 0 8px}
.kwx-page-note{font-size:14px;color:#655272;margin:0 0 16px}
.kwx-page-related{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kwx-page-related li{padding:14px 18px;background:#fff;border:1px solid #d6c5df;border-radius:12px;font-size:14px;line-height:1.6}
.kwx-page-related a{display:inline-flex;align-items:center;min-height:44px;font-weight:750;color:#4f256a;text-decoration:underline;text-underline-offset:4px}
.kwx-page-related span{display:block;font-size:13px;color:#655272}
.kwx-page .kwx-consult{border-top:1px solid #d9cfe0;margin-top:10px}
.kwx-page-back{margin:0}
.kwx-page-back a{display:inline-flex;align-items:center;min-height:44px;color:#4f256a;text-decoration:underline;text-underline-offset:4px}

/* ---------- responsive ---------- */
@media(max-width:900px){.kwx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kwx-card-visual{height:128px}.kwx-page-hero-with-visual{grid-template-columns:minmax(0,1fr) 220px;gap:12px 24px}.kwx-row{grid-template-columns:repeat(2,minmax(0,1fr))}.kwx-consult{display:block}.kwx-consult>a{display:inline-flex;margin-top:20px}.kwx-steps{grid-template-columns:1fr}.kwx-consult-inline{display:block}.kwx-consult-link{margin-top:16px}.kwx-process{grid-template-columns:repeat(2,minmax(0,1fr))}.kwx-process::before{display:none}.kwx-flow{grid-template-columns:1fr 1fr;gap:12px}.kwx-flow-link{display:none}.kwx-flow-node::after{content:'';position:absolute;right:-12px;top:50%;width:12px;height:2px;background:var(--x-line-strong)}.kwx-flow-node[data-step=check]::after,.kwx-flow-node[data-step=output]::after{display:none}}
@media(max-width:560px){.kwx-qr{grid-template-columns:1fr}.kwx-qr svg{max-width:220px}.kwx-image-pair{grid-template-columns:1fr}.kwx-table-wrap{max-height:min(420px,60vh)}.kwx th:first-child,.kwx td:first-child{position:sticky;left:0;background:#fff;box-shadow:1px 0 0 #e4d8eb}.kwx th:first-child{z-index:2;background:#e9dbf3}}
@media(max-width:560px){.kwx{border-radius:0;border-left:0;border-right:0;padding:22px 16px;margin:0 0 48px}.kwx-grid{grid-template-columns:1fr}.kwx-card{padding:20px}.kwx-card h3{margin-top:10px}.kwx-card p{margin-bottom:12px}
 /* Phone: the figure becomes a side thumbnail so 50 cards with images do not add 50 bands of scrolling. */
 .kwx-card[data-visual]{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"top top" "visual body" "action action";column-gap:14px;align-items:start}
 .kwx-card[data-visual] .kwx-card-top{grid-area:top}.kwx-card[data-visual] .kwx-card-visual{grid-area:visual;align-self:stretch;height:auto;min-height:104px;margin:10px 0 0}.kwx-card[data-visual] .kwx-card-body{grid-area:body}.kwx-card[data-visual] .kwx-card-action{grid-area:action;margin-top:12px}.kwx-card[data-visual] h3{margin-top:10px;font-size:18px}.kwx-card[data-visual] p{margin-bottom:0}
 /* Categories: seven buttons in two columns instead of a seven-row column; the odd last label spans the row. */
 .kwx-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kwx-categories button{justify-content:flex-start;min-height:48px;padding:10px 12px;white-space:normal;text-align:left;line-height:1.4}.kwx-categories button b{margin-left:auto;flex-shrink:0}.kwx-categories button:last-child:nth-child(odd){grid-column:1/-1}
 .kwx-page-hero-with-visual{display:block}.kwx-page-visual{margin-top:18px}.kwx-page-visual img{aspect-ratio:auto;height:clamp(120px,36vw,160px)}.kwx-fields{grid-template-columns:1fr}.kwx-finder{padding:16px}.kwx-tool{padding:16px}.kwx-tool-head{display:block}.kwx-tool-nav{justify-content:flex-start;margin-top:14px}.kwx-tool-nav a,.kwx-tool-nav button{flex:1 1 auto;justify-content:center}.kwx-row{grid-template-columns:1fr}.kwx-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.kwx-metric{padding:12px}.kwx-metric strong{font-size:21px}.kwx-actions button{flex:1 1 140px}.kwx button.kwx-run{width:100%}.kwx-exports button{width:100%;justify-content:center}.kwx table{font-size:12px}.kwx-step{grid-template-columns:44px auto 1fr;padding:12px}.kwx-step svg{width:44px;height:34px}.kwx-consult-link{width:100%;justify-content:center}.kwx-output[data-stale=true]::before{top:70px}.kwx-idle{grid-template-columns:1fr}.kwx-idle svg{grid-row:auto;width:80px}.kwx-process{grid-template-columns:1fr}.kwx-flow-compact{grid-template-columns:1fr}.kwx-flow-compact .kwx-flow-node::after{display:none}.kwx-page{padding:0 16px 40px}.kwx-page .kwx{margin:16px -16px 28px}.kwx-page-io>div,.kwx-page-related{grid-template-columns:1fr}.kwx-page-actions .ks-button{width:100%}}
@media(max-height:600px){.kwx,.kwx-tool,.kwx-stage,.kwx-output,.kwx .ks-anchor{scroll-margin-top:60px}.kwx-output[data-stale=true]::before{position:static;margin:12px 0 0}.kwx-table-wrap{max-height:60vh}}

/* ---------- pointer hover only ---------- */
@media(hover:hover){
 .kwx button:hover:not(:disabled){background:var(--x-soft);border-color:var(--x-purple)}
 .kwx-categories [aria-pressed=true]:hover{background:var(--x-purple-deep);border-color:var(--x-purple-deep)}
 .kwx-actions .kwx-sample:hover{background:#dcc3ee}
 .kwx button.kwx-run:hover:not(:disabled){background:var(--x-purple-deep);border-color:var(--x-purple-deep);box-shadow:0 12px 26px #61318550}
 .kwx button.kwx-run:hover:not(:disabled) .kwx-run-arrow{transform:translateX(4px)}
 .kwx-card:hover{transform:translateY(-3px);border-color:var(--x-purple);box-shadow:0 12px 28px #29153214}
 .kwx-card:hover::before{transform:none}
 .kwx-card:hover .kwx-arrow{transform:translate(3px,-3px)}
 .kwx-card:hover .kwx-card-visual img{transform:scale(1.03)}
 .kwx-step:hover{border-color:var(--x-line-strong);transform:translateY(-2px);box-shadow:0 10px 24px #29153210}
 .kwx-flow-node:hover{border-color:var(--x-line-strong)}
 .kwx-scope a:hover span{transform:translateY(3px)}
 .kwx summary:hover{background:#6131850a}
 .kwx-tool-nav a:hover,.kwx-tool-nav button:hover{background:var(--x-soft);border-color:var(--x-purple)}
 .kwx-tool-nav .kwx-close:hover .kwx-close-arrow{transform:translateX(-4px)}
 .kwx tbody tr:hover td{background:#f7f1fb}
 .kwx-metric:hover{transform:translateY(-2px);box-shadow:0 10px 22px #29153212}
 .kwx-consult-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0005;background:#e8ffb3}
 .kwx-consult-link:hover .kwx-arrow{transform:translateX(4px)}
 .kwx-export:hover:not(:disabled) .kwx-export-icon{transform:translateY(3px)}
 .kwx-share:hover:not(:disabled){background:var(--x-warm-soft);border-color:var(--x-warm-deep)}
 .kwx-crumb a:hover,.kwx-page-related a:hover,.kwx-page-back a:hover{color:#613185}
}

/* ---------- keyframes ---------- */
@keyframes kwx-card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes kwx-panel-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kwx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kwx-fade{from{opacity:0}to{opacity:1}}
@keyframes kwx-fade-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes kwx-sweep{from{transform:scaleX(0)}to{transform:none}}
@keyframes kwx-draw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@keyframes kwx-draw-120{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes kwx-status-in{from{opacity:.4;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes kwx-nudge{0%{transform:translateX(0)}25%{transform:translateX(-5px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}100%{transform:none}}
@keyframes kwx-ring{0%{box-shadow:0 0 0 0 #f3b56299}100%{box-shadow:0 0 0 18px #f3b56200}}
@keyframes kwx-pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:none}}
@keyframes kwx-drop{0%{transform:translateY(0);opacity:1}60%{transform:translateY(8px);opacity:0}61%{transform:translateY(-6px);opacity:0}100%{transform:none;opacity:1}}
@keyframes kwx-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes kwx-spin{to{transform:rotate(360deg)}}
@keyframes kwx-nudge-run{0%{box-shadow:0 8px 22px #61318540,0 0 0 0 #f3b562cc}60%{box-shadow:0 8px 22px #61318540,0 0 0 14px #f3b56200}100%{box-shadow:0 8px 22px #61318540,0 0 0 0 #f3b56200}}
@keyframes kwx-return{0%{box-shadow:0 0 0 0 #f3b562cc;background:#fff8ea}70%{box-shadow:0 0 0 12px #f3b56200}100%{box-shadow:0 0 0 0 #f3b56200;background:#fff}}
@keyframes kwx-filled{0%{box-shadow:inset 0 0 0 0 #f3b56200;background:#fff8ea80}100%{box-shadow:none;background:transparent}}

/* ---------- reduced motion: states still change, nothing moves ---------- */
@media(prefers-reduced-motion:reduce){
 .kwx *,.kwx *::before,.kwx *::after,.kwx-page *,.kwx-page *::before,.kwx-page *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
 .kwx-card:hover,.kwx-card:hover .kwx-arrow,.kwx-card:hover .kwx-card-visual img,.kwx-step:hover,.kwx-metric:hover,.kwx-consult-link:hover{transform:none}
 .kwx-tool[data-busy=true] .kwx-run::after{border-top-color:#ffffff66}
}