convolution-explorer { --cve-bg: var(--pst-color-surface, #fff); --cve-panel: var(--pst-color-background, #f5f7fa); --cve-text: var(--pst-color-text-base, #172033); --cve-muted: #64748b; --cve-border: var(--pst-color-border, #cbd5e1); display: block; margin: 1.5rem 0; color: var(--cve-text); }
@media (prefers-color-scheme: dark) { convolution-explorer { --cve-bg: #191b1f; --cve-panel: #111318; --cve-text: #f1f5f9; --cve-muted: #a7b0bd; --cve-border: #3c424c; } }
.cve-widget, .cve-widget * { box-sizing: border-box; }
.cve-widget { padding: .8rem; border: 1px solid var(--cve-border); border-radius: .7rem; background: var(--cve-bg); }
.cve-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .4rem; margin-bottom: .65rem; }
.cve-controls label { display: grid; gap: .18rem; font-size: .68rem; font-weight: 650; }
.cve-controls select, .cve-controls button { height: 1.9rem; padding: .25rem .4rem; border: 1px solid var(--cve-border); border-radius: .35rem; background: var(--cve-bg); color: var(--cve-text); font-size: .72rem; }
.cve-controls button { cursor: pointer; }
.cve-panels { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: .6rem; }
.cve-card { min-width: 0; padding: .55rem; border: 1px solid var(--cve-border); border-radius: .5rem; background: var(--cve-panel); }
.cve-panels > .cve-card:last-child { position: relative; }
.cve-heading { display: flex; justify-content: space-between; gap: .3rem; margin-bottom: .45rem; }
.cve-heading h3 { margin: 0; font-size: .8rem; }
.cve-heading span { color: var(--cve-muted); font: .62rem ui-monospace, monospace; }
.cve-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(1.35rem, 1fr)); gap: 2px; }
.cve-grid button { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid var(--cve-border); border-radius: .18rem; background: var(--cve-bg); color: var(--cve-text); font-size: .62rem; cursor: pointer; }
.cve-input button.is-sampled, .cve-map button.is-active { outline: 2px solid #2563eb; outline-offset: -2px; }
.cve-kernel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.cve-kernel input { width: 100%; min-width: 0; height: 2rem; padding: .1rem; border: 1px solid var(--cve-border); border-radius: .2rem; background: var(--cve-bg); color: var(--cve-text); font-size: .62rem; text-align: center; }
.cve-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; min-height: 0; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--cve-border); }
.cve-products span { display: grid; place-items: center; min-height: 2.2rem; padding: .25rem; color: var(--cve-text); font: 600 .66rem ui-monospace, monospace; }
.cve-sum { margin-top: .3rem; text-align: right; font: 700 .9rem ui-monospace, monospace; }
[data-outputs] { display: block; overflow: visible; }
.cve-map { min-width: 0; }
.cve-map > b { display: block; margin: 0 0 .2rem; color: var(--cve-muted); font-size: .64rem; }
.cve-filter-tabs { position: absolute; right: 0; bottom: calc(100% + .3rem); display: flex; gap: .25rem; }
.cve-filter-tabs:empty { display: none; }
.cve-filter-tabs button { padding: .12rem .35rem; border: 1px solid var(--cve-border); border-radius: .3rem; background: var(--cve-bg); color: var(--cve-text); font-size: .6rem; cursor: pointer; }
.cve-filter-tabs button[aria-selected="true"] { color: #fff; border-color: #2563eb; background: #2563eb; }
.cve-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .6rem 0 0 !important; }
.cve-summary div { display: flex; justify-content: space-between; gap: .3rem; padding: .35rem; border-radius: .3rem; background: var(--cve-panel); }
.cve-summary dt { color: var(--cve-muted); font-size: .65rem; }
.cve-summary dd { margin: 0; font-size: .68rem; font-weight: 700; }
.cve-error { margin: .4rem 0 0; color: #b45309; font-size: .72rem; }
.cve-error:empty { display: none; }
.cve-widget :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 750px) { .cve-panels { grid-template-columns: 1fr 1fr; } .cve-card:last-child { grid-column: 1 / -1; } .cve-summary { grid-template-columns: 1fr; } }
@media (max-width: 440px) { .cve-widget { padding: .55rem; } .cve-panels { grid-template-columns: 1fr; } .cve-card:last-child { grid-column: auto; } .cve-controls label { flex: 1 1 28%; } .cve-controls select { width: 100%; } }