6c3abab032
- Interactive web app (interactive/) explaining how transformer weights execute deterministic WASM programs: softmax sharpening, 2D parabola trick for exact memory lookup, stack machine step-through, and full execution trace visualization - Manim animation script (manim_project/scene.py) with 9 scenes covering the article's key concepts Co-authored-by: Ona <no-reply@ona.com>
1238 lines
22 KiB
CSS
1238 lines
22 KiB
CSS
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #0a0a14;
|
|
--surface: #12121f;
|
|
--surface2: #1a1a2e;
|
|
--border: #2a2a44;
|
|
--text: #d0d0e0;
|
|
--dim: #666680;
|
|
--accent: #4fc3f7;
|
|
--accent2: #ab47bc;
|
|
--green: #66bb6a;
|
|
--gold: #ffd54f;
|
|
--warn: #ff7043;
|
|
--radius: 10px;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#app {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1.5rem 4rem;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.8rem;
|
|
color: var(--accent);
|
|
margin-bottom: 0.4rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--dim);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Tabs */
|
|
#tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 2rem;
|
|
overflow-x: auto;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.tab {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--dim);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
white-space: nowrap;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tab:hover { color: var(--text); border-color: var(--accent); }
|
|
.tab.active {
|
|
background: var(--accent);
|
|
color: var(--bg);
|
|
border-color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Panels */
|
|
.panel { display: none; }
|
|
.panel.active { display: block; }
|
|
|
|
.panel h2 {
|
|
font-size: 1.35rem;
|
|
color: var(--accent);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Explainer blocks */
|
|
.explainer {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.2rem 1.4rem;
|
|
margin-bottom: 1.2rem;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.explainer p { margin-bottom: 0.6rem; }
|
|
.explainer p:last-child { margin-bottom: 0; }
|
|
.explainer ul { margin: 0.5rem 0 0.5rem 1.5rem; }
|
|
.explainer li { margin-bottom: 0.3rem; }
|
|
.explainer code {
|
|
background: var(--surface2);
|
|
padding: 0.15em 0.4em;
|
|
border-radius: 4px;
|
|
font-size: 0.88em;
|
|
color: var(--gold);
|
|
}
|
|
.explainer strong { color: var(--accent); }
|
|
.explainer em { color: var(--gold); font-style: normal; }
|
|
|
|
/* Demo boxes */
|
|
.demo-box {
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.4rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.demo-box h3 {
|
|
font-size: 1rem;
|
|
color: var(--gold);
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.demo-box h4 {
|
|
font-size: 0.85rem;
|
|
color: var(--dim);
|
|
margin-bottom: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.demo-box p { font-size: 0.88rem; margin-bottom: 0.6rem; }
|
|
|
|
.slider-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.slider-row label {
|
|
font-size: 0.85rem;
|
|
color: var(--dim);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.slider-row label strong { color: var(--accent); }
|
|
|
|
input[type="range"] {
|
|
flex: 1;
|
|
accent-color: var(--accent);
|
|
height: 6px;
|
|
}
|
|
|
|
.insight {
|
|
font-size: 0.82rem !important;
|
|
color: var(--green) !important;
|
|
font-style: italic;
|
|
margin-top: 0.8rem !important;
|
|
padding: 0.6rem 0.8rem;
|
|
background: rgba(102, 187, 106, 0.08);
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--green);
|
|
}
|
|
|
|
/* Softmax bars */
|
|
#softmaxBars {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
height: 180px;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.bar-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.bar-wrapper {
|
|
width: 100%;
|
|
height: 140px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bar {
|
|
width: 80%;
|
|
background: var(--accent);
|
|
border-radius: 4px 4px 0 0;
|
|
transition: height 0.3s ease, background 0.3s ease;
|
|
min-height: 2px;
|
|
}
|
|
|
|
.bar.winner { background: var(--gold); }
|
|
|
|
.bar-label {
|
|
font-size: 0.7rem;
|
|
color: var(--dim);
|
|
}
|
|
|
|
.bar-value {
|
|
font-size: 0.72rem;
|
|
color: var(--text);
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Memory slots (tab 2) */
|
|
#memorySlots {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mem-slot {
|
|
background: var(--surface);
|
|
border: 2px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 0.6rem 0.8rem;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
min-width: 80px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.mem-slot:hover { border-color: var(--accent); }
|
|
.mem-slot.active { border-color: var(--gold); background: rgba(255, 213, 79, 0.1); }
|
|
|
|
.mem-slot .idx { font-size: 0.7rem; color: var(--dim); }
|
|
.mem-slot .val { font-size: 1.1rem; color: var(--text); font-family: monospace; font-weight: 600; }
|
|
|
|
#dotProducts {
|
|
margin: 1rem 0;
|
|
font-family: monospace;
|
|
font-size: 0.82rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.dp-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.dp-row .dp-bar {
|
|
height: 14px;
|
|
background: var(--accent);
|
|
border-radius: 3px;
|
|
transition: width 0.3s, background 0.3s;
|
|
}
|
|
|
|
.dp-row .dp-bar.winner { background: var(--gold); }
|
|
.dp-row .dp-label { width: 50px; color: var(--dim); }
|
|
.dp-row .dp-score { width: 60px; text-align: right; }
|
|
.dp-row .dp-weight { width: 70px; text-align: right; color: var(--green); }
|
|
|
|
#readResult {
|
|
margin-top: 1rem;
|
|
padding: 0.8rem 1rem;
|
|
background: rgba(255, 213, 79, 0.1);
|
|
border-radius: 8px;
|
|
border-left: 3px solid var(--gold);
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Side-by-side comparison */
|
|
.sbs-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.sbs-panel {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.sbs-header {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
|
|
.sbs-header.trad { color: var(--accent2); border-color: var(--accent2); }
|
|
.sbs-header.lookup { color: var(--gold); border-color: var(--gold); }
|
|
|
|
.sbs-subtitle {
|
|
font-size: 0.72rem;
|
|
color: var(--dim);
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.sbs-vec-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.sbs-keys {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.sbs-key-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 6px 4px;
|
|
border-radius: 6px;
|
|
min-width: 58px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.sbs-key-group.winner { background: rgba(255, 213, 79, 0.1); }
|
|
.sbs-key-group.trad-winner { background: rgba(171, 71, 188, 0.1); }
|
|
|
|
.sbs-key-group .sbs-word {
|
|
font-size: 0.7rem;
|
|
color: var(--dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
.sbs-key-group .sbs-score {
|
|
font-family: monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.sbs-key-group .sbs-weight {
|
|
font-family: monospace;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sbs-key-group.winner .sbs-weight { color: var(--gold); }
|
|
.sbs-key-group.trad-winner .sbs-weight { color: var(--accent2); }
|
|
|
|
.sbs-weight-bar {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
transition: width 0.3s;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.sbs-key-group .sbs-weight-bar { background: var(--accent); }
|
|
.sbs-key-group.winner .sbs-weight-bar { background: var(--gold); }
|
|
.sbs-key-group.trad-winner .sbs-weight-bar { background: var(--accent2); }
|
|
|
|
.sbs-result {
|
|
font-size: 0.82rem;
|
|
padding: 0.5rem 0.7rem;
|
|
background: var(--surface2);
|
|
border-radius: 6px;
|
|
margin-bottom: 0.6rem;
|
|
font-family: monospace;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.sbs-note {
|
|
font-size: 0.78rem;
|
|
color: var(--dim);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.sbs-note strong { color: var(--text); }
|
|
|
|
.sbs-controls {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Small column vec variant for SBS */
|
|
.col-vec.sbs-vec .cell {
|
|
font-size: 0.78rem;
|
|
padding: 2px 8px;
|
|
min-width: 36px;
|
|
}
|
|
|
|
.col-vec.sbs-vec .vec-label {
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sbs-container { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Write-read trace demo */
|
|
.write-read-demo {
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.wr-trace {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0.8rem;
|
|
min-height: 90px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.wr-token {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
min-width: 70px;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
}
|
|
|
|
.wr-token.new-token {
|
|
animation: wrFlash 0.6s ease;
|
|
}
|
|
|
|
.wr-token.reading {
|
|
border-color: var(--warn);
|
|
box-shadow: 0 0 8px rgba(255, 112, 67, 0.3);
|
|
}
|
|
|
|
.wr-token.found {
|
|
border-color: var(--gold);
|
|
background: rgba(255, 213, 79, 0.1);
|
|
box-shadow: 0 0 8px rgba(255, 213, 79, 0.3);
|
|
}
|
|
|
|
.wr-token.shadowed {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
@keyframes wrFlash {
|
|
0% { background: rgba(102, 187, 106, 0.25); }
|
|
100% { background: var(--surface); }
|
|
}
|
|
|
|
.wr-token .wr-tok-label {
|
|
font-size: 0.65rem;
|
|
color: var(--dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.wr-token .wr-tok-instr {
|
|
font-family: monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wr-token .wr-tok-kv {
|
|
font-family: monospace;
|
|
font-size: 0.65rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.wr-tok-kv .wr-k { color: var(--accent); }
|
|
.wr-tok-kv .wr-v { color: var(--green); }
|
|
|
|
.wr-read-arrow {
|
|
position: absolute;
|
|
top: -18px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 0.65rem;
|
|
color: var(--warn);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wr-action {
|
|
padding: 0.6rem 0.8rem;
|
|
background: var(--surface2);
|
|
border-radius: 8px;
|
|
font-size: 0.82rem;
|
|
line-height: 1.6;
|
|
min-height: 50px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.wr-action .wr-step-title {
|
|
font-weight: 600;
|
|
color: var(--gold);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* Attention flow diagram */
|
|
.attn-flow-diagram {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 0.8rem 0;
|
|
}
|
|
|
|
.attn-flow-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.attn-flow-label {
|
|
font-size: 0.7rem;
|
|
color: var(--dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.attn-flow-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.attn-flow-box {
|
|
font-family: monospace;
|
|
font-size: 0.85rem;
|
|
padding: 0.3rem 0.7rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.attn-flow-box.computed {
|
|
border-color: var(--dim);
|
|
border-style: dashed;
|
|
color: var(--dim);
|
|
}
|
|
|
|
.attn-flow-desc {
|
|
font-size: 0.75rem;
|
|
color: var(--dim);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.attn-flow-desc strong { color: var(--gold); }
|
|
|
|
/* Token pipeline diagram */
|
|
.pipeline-diagram {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
margin: 0.8rem 0;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pipe-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.pipe-label {
|
|
font-size: 0.7rem;
|
|
color: var(--dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.pipe-box {
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 0.4rem 0.8rem;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.pipe-box.pipe-text { color: var(--gold); font-style: italic; }
|
|
.pipe-box.pipe-id { color: var(--accent); }
|
|
.pipe-box.pipe-emb { font-size: 0.8rem; color: var(--green); }
|
|
|
|
.pipe-dim {
|
|
font-size: 0.65rem;
|
|
color: var(--dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
.pipe-arrow {
|
|
font-size: 1.1rem;
|
|
color: var(--dim);
|
|
padding: 0 0.6rem;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.pipe-arrow-label {
|
|
font-size: 0.65rem;
|
|
color: var(--dim);
|
|
}
|
|
|
|
/* QKV matrix multiply diagram */
|
|
.qkv-matmul-diagram {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin: 0.6rem 0;
|
|
}
|
|
|
|
.qkv-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.qkv-input {
|
|
font-family: monospace;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
min-width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.qkv-times {
|
|
font-size: 0.9rem;
|
|
color: var(--dim);
|
|
}
|
|
|
|
.qkv-matrix {
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
padding: 0.25rem 0.6rem;
|
|
border: 2px solid;
|
|
border-radius: 6px;
|
|
background: var(--surface2);
|
|
min-width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.qkv-eq {
|
|
font-size: 0.9rem;
|
|
color: var(--dim);
|
|
}
|
|
|
|
.qkv-output {
|
|
font-family: monospace;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.qkv-meaning {
|
|
font-size: 0.78rem;
|
|
color: var(--dim);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Query origin visualization */
|
|
.query-origin-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-top: 0.8rem;
|
|
}
|
|
|
|
.qo-panel {
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.qo-header {
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.7rem;
|
|
padding-bottom: 5px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.qo-pipeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
align-items: center;
|
|
margin-bottom: 0.7rem;
|
|
}
|
|
|
|
.qo-step {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.qo-label {
|
|
font-size: 0.7rem;
|
|
color: var(--dim);
|
|
margin-bottom: 2px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.qo-box {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 0.4rem 0.6rem;
|
|
font-size: 0.82rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.qo-box code {
|
|
color: var(--gold);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.qo-box.learned {
|
|
border-color: var(--accent2);
|
|
color: var(--accent2);
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.qo-box.engineered {
|
|
border-color: var(--gold);
|
|
color: var(--gold);
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.qo-dim {
|
|
font-size: 0.68rem;
|
|
color: var(--dim);
|
|
margin-top: 2px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.qo-arrow {
|
|
font-size: 0.85rem;
|
|
color: var(--dim);
|
|
padding: 2px 0;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.qo-note {
|
|
font-size: 0.78rem;
|
|
color: var(--dim);
|
|
line-height: 1.5;
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
.qo-note strong { color: var(--text); }
|
|
.qo-note em { color: var(--gold); font-style: normal; }
|
|
|
|
@media (max-width: 768px) {
|
|
.query-origin-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* KQV explanation table */
|
|
.kqv-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 6px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.kqv-table td {
|
|
padding: 0.6rem 0.8rem;
|
|
background: var(--surface2);
|
|
font-size: 0.85rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.kqv-table tr td:first-child {
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
|
|
.kqv-table tr td:last-child {
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
|
|
.kqv-name {
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
width: 70px;
|
|
}
|
|
|
|
/* Column vector displays (tab 2) */
|
|
#queryVec {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.col-vec {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.col-vec .bracket {
|
|
position: absolute;
|
|
top: 0; bottom: 0;
|
|
width: 6px;
|
|
border: 2px solid var(--accent);
|
|
border-right: none;
|
|
border-radius: 4px 0 0 4px;
|
|
left: -10px;
|
|
}
|
|
|
|
.col-vec .bracket-r {
|
|
position: absolute;
|
|
top: 0; bottom: 0;
|
|
width: 6px;
|
|
border: 2px solid var(--accent);
|
|
border-left: none;
|
|
border-radius: 0 4px 4px 0;
|
|
right: -10px;
|
|
}
|
|
|
|
.col-vec.query .bracket,
|
|
.col-vec.query .bracket-r { border-color: var(--warn); }
|
|
|
|
.col-vec.winner .bracket,
|
|
.col-vec.winner .bracket-r { border-color: var(--gold); }
|
|
|
|
.col-vec .cell {
|
|
font-family: monospace;
|
|
font-size: 0.95rem;
|
|
padding: 4px 14px;
|
|
text-align: right;
|
|
min-width: 48px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.col-vec.query .cell { color: var(--warn); font-weight: 600; }
|
|
.col-vec.winner .cell { color: var(--gold); font-weight: 600; }
|
|
|
|
.vec-label {
|
|
font-size: 0.72rem;
|
|
color: var(--dim);
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.col-vec.winner .vec-label { color: var(--gold); }
|
|
|
|
#vecColumns {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: flex-start;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.vec-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 8px 6px;
|
|
border-radius: 8px;
|
|
transition: background 0.2s;
|
|
min-width: 72px;
|
|
}
|
|
|
|
.vec-group.winner { background: rgba(255, 213, 79, 0.08); }
|
|
|
|
.dot-product-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: monospace;
|
|
font-size: 0.78rem;
|
|
margin-top: 4px;
|
|
color: var(--dim);
|
|
}
|
|
|
|
.dot-product-line .dp-val {
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.vec-group.winner .dot-product-line .dp-val { color: var(--gold); }
|
|
|
|
.dot-product-line .dp-weight {
|
|
font-size: 0.72rem;
|
|
color: var(--green);
|
|
}
|
|
|
|
.dp-bar-mini {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: var(--accent);
|
|
transition: width 0.3s;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.vec-group.winner .dp-bar-mini { background: var(--gold); }
|
|
|
|
.dot-computation {
|
|
font-family: monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--dim);
|
|
margin-top: 2px;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Two column layout */
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
canvas {
|
|
background: var(--surface);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Mechanism grid (tab 4) */
|
|
.mechanism-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.mechanism {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.mechanism h3 {
|
|
font-size: 0.95rem;
|
|
color: var(--gold);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.mechanism p {
|
|
font-size: 0.8rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.mechanism strong { color: var(--accent); font-size: 0.78rem; }
|
|
|
|
/* Stack machine vis */
|
|
#stackMachineVis {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#smProgram, #smState, #smHeads {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 0.8rem;
|
|
min-height: 200px;
|
|
}
|
|
|
|
#smProgram h4, #smState h4, #smHeads h4 {
|
|
font-size: 0.78rem;
|
|
color: var(--dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.instr-line {
|
|
font-family: monospace;
|
|
font-size: 0.8rem;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.instr-line.current {
|
|
background: rgba(79, 195, 247, 0.15);
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.instr-line.done { color: var(--dim); }
|
|
|
|
.state-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.82rem;
|
|
padding: 3px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.state-row .label { color: var(--dim); }
|
|
.state-row .value { font-family: monospace; color: var(--gold); font-weight: 600; }
|
|
|
|
.stack-item {
|
|
font-family: monospace;
|
|
font-size: 0.85rem;
|
|
padding: 3px 8px;
|
|
background: rgba(79, 195, 247, 0.1);
|
|
border-radius: 4px;
|
|
margin-bottom: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stack-item.top { background: rgba(255, 213, 79, 0.15); color: var(--gold); }
|
|
|
|
.head-info {
|
|
font-size: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
padding: 0.4rem 0.5rem;
|
|
background: var(--surface2);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.head-info .head-name { color: var(--accent2); font-weight: 600; }
|
|
.head-info .head-action { color: var(--text); }
|
|
.head-info .head-detail { color: var(--dim); font-family: monospace; font-size: 0.72rem; }
|
|
|
|
/* Buttons */
|
|
.btn-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.action-btn {
|
|
background: var(--accent);
|
|
color: var(--bg);
|
|
border: none;
|
|
padding: 0.5rem 1.2rem;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn:hover { filter: brightness(1.15); }
|
|
.action-btn.secondary {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.next-btn {
|
|
display: block;
|
|
margin: 1.5rem auto 0;
|
|
background: none;
|
|
border: 1px solid var(--accent);
|
|
color: var(--accent);
|
|
padding: 0.6rem 1.5rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.next-btn:hover { background: var(--accent); color: var(--bg); }
|
|
|
|
/* Full execution (tab 5) */
|
|
#fullExec {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#feProgram, #feTrace, #feDetail {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 0.8rem;
|
|
min-height: 260px;
|
|
}
|
|
|
|
#feProgram h4, #feTrace h4, #feDetail h4 {
|
|
font-size: 0.78rem;
|
|
color: var(--dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.trace-token {
|
|
font-family: monospace;
|
|
font-size: 0.8rem;
|
|
padding: 3px 8px;
|
|
margin-bottom: 2px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.trace-token.new {
|
|
background: rgba(255, 213, 79, 0.12);
|
|
animation: flashIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes flashIn {
|
|
0% { background: rgba(255, 213, 79, 0.4); }
|
|
100% { background: rgba(255, 213, 79, 0.12); }
|
|
}
|
|
|
|
.trace-token .tok { color: var(--text); }
|
|
.trace-token .meta { color: var(--dim); font-size: 0.72rem; }
|
|
|
|
/* Comparison */
|
|
.comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-top: 0.8rem;
|
|
}
|
|
|
|
.comp-col {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.comp-col.highlight {
|
|
border-color: var(--accent);
|
|
background: rgba(79, 195, 247, 0.05);
|
|
}
|
|
|
|
.comp-col h4 {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.comp-col p {
|
|
font-size: 0.82rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
/* Summary grid */
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.8rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.summary-item {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 0.8rem 1rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.summary-item strong { color: var(--gold); }
|
|
.summary-item .dim { color: var(--dim); font-size: 0.78rem; }
|
|
|
|
/* IP demo */
|
|
.ip-trace {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ip-cell {
|
|
background: var(--surface2);
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
font-family: monospace;
|
|
font-size: 0.7rem;
|
|
text-align: center;
|
|
min-width: 36px;
|
|
}
|
|
|
|
.ip-cell .delta { color: var(--green); }
|
|
.ip-cell .sum { color: var(--gold); font-weight: 600; }
|
|
|
|
/* Stack vis */
|
|
.stack-vis {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
gap: 3px;
|
|
max-height: 100px;
|
|
}
|
|
|
|
.sv-item {
|
|
background: rgba(79, 195, 247, 0.12);
|
|
border-radius: 4px;
|
|
padding: 2px 8px;
|
|
font-family: monospace;
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.mechanism-grid { grid-template-columns: 1fr; }
|
|
#stackMachineVis { grid-template-columns: 1fr; }
|
|
#fullExec { grid-template-columns: 1fr; }
|
|
.two-col { grid-template-columns: 1fr; }
|
|
.comparison { grid-template-columns: 1fr; }
|
|
.summary-grid { grid-template-columns: 1fr; }
|
|
.vec-vis-container { grid-template-columns: 1fr; }
|
|
#tabs { flex-wrap: wrap; }
|
|
}
|