/* Representation mechanisms: four different objectives, four different visual grammars. */
.rep-node{min-width:0;padding:10px;border:1px solid var(--mech-line);border-radius:10px;background:var(--mech-panel);color:var(--mech-ink);text-align:center}
.rep-node strong{display:block;font-size:10px;line-height:1.25}.rep-node small{display:block;margin-top:4px;color:var(--mech-muted);font-size:8px;line-height:1.35}
.rep-code{display:block;margin-top:7px;color:var(--mech-accent);font:800 7.5px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.rep-train-state{display:inline-flex;align-items:center;gap:5px;margin-bottom:7px;padding:4px 6px;border:1px solid var(--mech-accent);border-radius:99px;color:var(--mech-accent);font:900 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.rep-train-state::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* Reconstruction-first: the bottleneck and all gradient-producing losses stay visible. */
.reconstruction-canvas{display:grid;gap:12px;min-height:355px}
.recon-pipeline{display:grid;grid-template-columns:132px 28px 132px 28px 172px 28px 132px 28px 132px;align-items:center;gap:6px}
.recon-source,.recon-output{display:grid;place-items:center;gap:6px;color:var(--mech-muted);font:800 7.5px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-align:center}
.recon-source .photo-grid{opacity:0}
.recon-output .mechanism-photo{filter:saturate(.86) contrast(.94)}.recon-output .photo-grid{opacity:.16;background-size:25% 25%}
.recon-encoder,.recon-decoder{min-height:112px;display:grid;align-content:center}
.recon-latents{display:grid;grid-template-columns:repeat(4,16px);gap:4px;justify-content:center;margin:9px 0}.recon-latents i{width:16px;height:16px;border:1px solid #4c7772;border-radius:50%;background:radial-gradient(circle at 35% 30%,#76c9be,#253f3d)}
.recon-quantizer{min-height:132px}.recon-codebook{display:flex;justify-content:center;gap:4px;margin:8px 0}.recon-codebook i{display:grid;place-items:center;width:25px;height:25px;border:1px solid #6d648e;border-radius:50%;background:#28243a;color:#c8bcff;font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.recon-codebook i.is-nearest{border-color:var(--mech-accent);background:color-mix(in srgb,var(--mech-accent) 24%,#172022);color:#fff}
.stop-grad{display:flex;justify-content:center;gap:7px;color:#c8bcff;font:800 6.8px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}.stop-grad b{padding:3px 5px;border:1px dashed #6d648e;border-radius:5px}
.recon-difference{display:grid;grid-template-columns:repeat(4,9px);gap:2px;padding:6px;border:1px solid #6f5a45;border-radius:7px;background:#171d1e}.recon-difference i{width:9px;height:9px;border-radius:2px;background:hsl(calc(26 + var(--d)*4),55%,calc(30% + var(--d)*4%))}
.recon-loss-map{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:11px;border-top:1px dashed var(--mech-line)}
.loss-branch{position:relative;min-height:78px;padding:10px;border:1px solid var(--mech-line);border-radius:10px;background:#151e1f;text-align:left}.loss-branch::before{content:"";position:absolute;left:50%;top:-12px;width:1px;height:11px;background:var(--mech-accent)}.loss-branch b{display:block;color:var(--mech-ink);font-size:9px}.loss-branch p{margin:5px 0 0;color:var(--mech-muted);font-size:8px;line-height:1.35}.loss-branch code{display:block;margin-top:5px;color:var(--mech-accent);font:800 7px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}

/* CLIP: paired batches split into two parallel towers and meet only at the matrix. */
.semantic-canvas{display:grid;grid-template-columns:176px 42px minmax(230px,.95fr) 42px minmax(210px,.84fr);grid-template-rows:auto auto;align-items:center;gap:10px;min-height:350px}
.clip-batch{display:grid;gap:6px}.paired-example{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:7px;padding:5px 7px;border:1px solid var(--mech-line);border-radius:8px;background:#172022;color:var(--mech-muted);font-size:8px}.pair-thumb{width:38px;height:27px;border-radius:5px;background:linear-gradient(145deg,hsl(var(--h),42%,64%),hsl(calc(var(--h) + 28),38%,28%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.paired-example b{display:block;color:var(--mech-ink);font-size:8px}.paired-example span:last-child{line-height:1.25}
.clip-fork,.clip-merge{position:relative;height:190px}.clip-fork::before,.clip-fork::after,.clip-merge::before,.clip-merge::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--mech-line);transform-origin:left center}.clip-fork::before{top:47px;transform:rotate(-27deg)}.clip-fork::after{bottom:47px;transform:rotate(27deg)}.clip-merge::before{top:47px;transform:rotate(27deg)}.clip-merge::after{bottom:47px;transform:rotate(-27deg)}
.clip-towers{display:grid;gap:12px}.clip-tower{min-height:91px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;text-align:left}.clip-tower.image{border-left:2px solid #52c7b8}.clip-tower.text{border-left:2px solid #e08369}.clip-embeddings{display:grid;grid-template-columns:repeat(4,13px);gap:3px}.clip-embeddings i{width:13px;height:13px;border-radius:3px;background:#52c7b8}.clip-tower.text .clip-embeddings i{background:#e08369}.clip-normalize{grid-column:1/-1;color:var(--mech-muted);font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.clip-matrix-card{position:relative;padding:11px}.clip-matrix-grid{display:grid;grid-template-columns:repeat(4,28px);gap:4px;justify-content:center;margin:8px 0}.clip-matrix-grid i{display:grid;place-items:center;width:28px;height:28px;border:1px solid #334245;border-radius:5px;background:color-mix(in srgb,var(--mech-accent) calc(var(--s)*1%),#1b2426);color:#dbe1e1;font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.clip-matrix-grid i.positive{border-color:#f0d47e;color:#fff;box-shadow:inset 0 0 0 1px rgba(240,212,126,.45)}
.matrix-scan{position:absolute;pointer-events:none;border:1px solid #f0d47e;border-radius:6px}.matrix-scan.row{left:calc(50% - 62px);top:72px;width:124px;height:32px}.matrix-scan.col{left:calc(50% - 62px);top:38px;width:32px;height:124px}
.clip-losses{grid-column:3/6;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--mech-line);border-radius:10px;background:#151e1f}.clip-loss{padding:7px;border:1px solid #3b4a4d;border-radius:7px;color:var(--mech-muted);font-size:8px}.clip-loss b{display:block;margin-bottom:3px;color:var(--mech-ink);font-size:8px}.clip-losses code{color:var(--mech-accent);font:900 7.5px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace}

/* SoundStream: time is horizontal, RVQ depth is vertical. */
.codec-canvas{display:grid;grid-template-columns:120px 28px 125px 28px minmax(310px,1.25fr) 28px 125px;align-items:center;gap:7px;min-height:365px}
.codec-source,.codec-output{display:grid;gap:8px;text-align:center}.codec-output{position:relative;grid-column:7;grid-row:2;padding-top:13px}.codec-output::before{content:"";position:absolute;left:50%;top:0;width:1px;height:11px;background:#e4b652}.codec-wave{height:72px;display:flex;align-items:center;justify-content:center;gap:3px;padding:7px;border:1px solid var(--mech-line);border-radius:9px;background:#151e1f}.codec-wave i{width:4px;height:calc(10px + var(--a)*1px);max-height:54px;border-radius:99px;background:var(--mech-accent);transform-origin:center center}.codec-output .codec-wave i{background:#e4b652}
.codec-encoder,.codec-decoder{min-height:116px;display:grid;align-content:center}.frame-bank{display:flex;justify-content:center;gap:4px;margin-top:8px}.frame-bank i{display:grid;place-items:center;width:23px;height:23px;border:1px solid #3f716c;border-radius:5px;background:#1d3432;color:#7ddcd1;font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}
.rvq-board{padding:10px;border:1px solid var(--mech-line);border-radius:11px;background:#141c1e}.rvq-axis{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--mech-muted);font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.rvq-matrix{display:grid;grid-template-columns:38px repeat(4,1fr);gap:4px}.rvq-head,.rvq-label,.rvq-cell{display:grid;place-items:center;min-height:25px;border-radius:5px;font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.rvq-head{color:var(--mech-muted)}.rvq-label{border:1px solid #4a5b5e;color:var(--mech-ink)}.rvq-cell{border:1px solid #3b6964;background:#1c3432;color:#7ddcd1}.rvq-cell.focus{border-color:#f0d47e;color:#fff}.rvq-cell.depth-3,.rvq-cell.depth-4{border-color:#625b78;background:#29263a;color:#c9bdff}
.rate-selector{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:8px;color:var(--mech-muted);font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.rate-chip{padding:4px 6px;border:1px solid var(--mech-line);border-radius:99px}.rate-chip.selected{border-color:var(--mech-accent);color:var(--mech-accent)}
.residual-focus{grid-column:1/7;grid-row:2;display:grid;grid-template-columns:auto repeat(4,1fr);align-items:center;gap:6px;padding:9px 10px;border:1px solid var(--mech-line);border-radius:10px;background:#151e1f}.residual-focus>strong{color:var(--mech-ink);font-size:8px}.residual-step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px;color:var(--mech-muted);font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.energy{height:6px;border-radius:99px;background:#2b383a;overflow:hidden}.energy i{display:block;width:var(--energy);height:100%;border-radius:inherit;background:var(--mech-accent);transform-origin:left center}.residual-step code{grid-column:1/-1;color:var(--mech-muted);font-size:6.8px}

/* TokenLearner: task loss shapes spatial attention maps, then pooled tokens. */
.task-shaped-canvas{display:grid;grid-template-columns:145px 30px 178px 30px minmax(210px,.9fr) 30px 135px;align-items:center;gap:7px;min-height:360px}
.task-input{display:grid;place-items:center;gap:7px}.task-input .mechanism-photo{width:124px}.feature-map-card{min-height:155px;display:grid;align-content:center}.feature-map-grid{display:grid;grid-template-columns:repeat(6,16px);gap:3px;justify-content:center;margin:9px 0}.feature-map-grid i{width:16px;height:16px;border-radius:3px;background:hsl(calc(154 + var(--i)*5),calc(30% + var(--r)*5%),calc(31% + var(--r)*6%))}
.attention-bank{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:9px 0}.attention-map-mini{position:relative;aspect-ratio:1;border:1px solid #4b5c5f;border-radius:6px;overflow:hidden;background:#172022}.attention-map-mini::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),rgba(242,193,91,.95),rgba(82,199,184,.35) 24%,transparent 55%)}.attention-map-mini b{position:absolute;left:4px;bottom:3px;color:#fff;font:900 6px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.attention-more{display:grid;place-items:center;color:var(--mech-muted);font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.task-tokens{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:10px 0}.task-tokens i{display:grid;place-items:center;width:27px;height:27px;border:1px solid #8a7442;border-radius:50%;background:#352f20;color:#f0d47e;font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.pool-rule{padding-top:7px;border-top:1px dashed var(--mech-line);color:var(--mech-accent);font:800 7px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.task-head{min-height:138px;display:grid;align-content:center;border-color:#826b37}.task-prediction{margin-top:8px;padding:6px;border-radius:7px;background:#302b20;color:#f0d47e;font:900 8px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
.task-gradient-rail{grid-column:3/8;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:9px 10px;border:1px dashed var(--mech-accent);border-radius:9px;color:var(--mech-muted);font:800 7px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}.gradient-back{position:relative;height:1px;background:var(--mech-accent)}.gradient-back::before{content:"";position:absolute;left:0;top:-3px;width:6px;height:6px;border-left:1px solid var(--mech-accent);border-bottom:1px solid var(--mech-accent);transform:rotate(45deg)}.task-gradient-rail b{color:var(--mech-accent)}

@media(max-width:700px){.reconstruction-canvas,.semantic-canvas,.codec-canvas,.task-shaped-canvas{min-width:940px}}
@media(prefers-reduced-motion:reduce){.reconstruction-canvas *,.semantic-canvas *,.codec-canvas *,.task-shaped-canvas *{animation-duration:1ms!important;transition-duration:1ms!important}}