.mechanism-lab{--ex-violet:#b39ae5;--ex-mint:#68c4b3;--ex-amber:#dfb773;border:1px solid var(--border);background:var(--panel);min-width:0;color:var(--foreground);font:400 14px/1.75 var(--font-geist-sans),sans-serif;border-radius:14px;margin:32px 0;padding:28px}.mechanism-lab *{box-sizing:border-box}.mechanism-lab header h3{font:500 clamp(21px,2vw,27px)/1.25 var(--font-geist-sans),sans-serif;letter-spacing:-.025em;color:var(--foreground);margin:0 0 12px}.mechanism-lab p{max-width:74ch;color:var(--soft);margin:12px 0;font-size:14px;line-height:1.8}.mechanism-lab header p{margin-bottom:24px}.mechanism-lab button,.mechanism-lab input{font:inherit}.mechanism-lab button{cursor:pointer}.mechanism-lab :is(button,input,summary,a):focus-visible{outline:2px solid var(--ex-violet);outline-offset:4px}.mechanism-lab input[type=range]{width:100%;accent-color:var(--ex-violet);cursor:pointer;min-height:32px}.ex-controls{grid-template-columns:1fr 1fr;gap:24px;margin:18px 0;display:grid}.ex-slider{min-width:0}.ex-slider label{color:var(--soft);justify-content:space-between;gap:12px;font-size:13px;display:flex}.ex-slider output{color:var(--foreground);font-variant-numeric:tabular-nums}.ex-check{align-items:center;gap:10px;min-height:44px;margin:16px 0;font-size:13px;display:flex}.ex-check input{accent-color:var(--ex-violet);width:17px;height:17px}.ex-steps,.ex-token-strip{flex-wrap:wrap;gap:6px;margin:18px 0;display:flex}.ex-steps button,.ex-token-strip button,.ex-trace-tokens button{color:var(--muted);background:0 0;border:1px solid #0000;border-radius:7px;min-height:44px;padding:9px 13px}.ex-steps button[aria-pressed=true],.ex-token-strip button[aria-pressed=true],.ex-trace-tokens button[aria-pressed=true]{border-color:color-mix(in srgb,var(--ex-violet) 50%,transparent);background:color-mix(in srgb,var(--ex-violet) 10%,transparent);color:var(--foreground)}.ex-token-strip button{text-align:left;flex:1}.ex-token-strip small{color:var(--muted);font-size:11px;display:block}.ex-readout{border-left:2px solid var(--ex-violet);background:color-mix(in srgb,var(--ex-violet) 5%,transparent);color:var(--soft);flex-direction:column;gap:6px;margin:22px 0;padding:12px 18px;font-size:13px;display:flex}.ex-readout strong{color:var(--foreground);font-variant-numeric:tabular-nums;font-size:21px;font-weight:500;line-height:1.4}.ex-details,.ex-challenge{border-top:1px solid var(--border);margin-top:22px;padding-top:6px}.ex-details summary,.ex-challenge summary{cursor:pointer;color:var(--foreground);min-height:44px;padding:12px 0}.ex-challenge summary{font-weight:500}.mechanism-lab footer{margin-top:20px}.mechanism-lab footer p{color:var(--muted);font-size:12px}.mechanism-lab footer>div{flex-wrap:wrap;gap:12px 24px;font-size:12px;display:flex}.mechanism-lab a{text-underline-offset:4px;color:var(--soft);text-decoration:underline}.ex-matrices{flex-wrap:wrap;align-items:flex-start;gap:24px;display:flex}.ex-matrix{max-width:100%;overflow:auto}.ex-matrix table{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums;font-size:12px}.ex-matrix caption{text-align:left;color:var(--muted);margin-bottom:8px}.ex-matrix td{text-align:right;background:color-mix(in srgb,var(--ex-violet) 10%,transparent);border-radius:3px;min-width:34px;padding:5px 7px}.ex-flow{gap:20px;margin:20px 0;padding:0;list-style:none;display:flex}.ex-flow li{border-left:2px solid var(--border);flex:1;min-width:0;padding-left:14px}.ex-flow span,.ex-flow strong,.ex-flow small{display:block}.ex-flow span,.ex-flow small{color:var(--muted);font-size:12px}.ex-flow strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums;margin:5px 0;font-size:17px;font-weight:500}.ex-geometry{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;display:grid}.ex-geometry svg{width:100%;height:auto;overflow:visible}.ex-geometry svg text{fill:var(--muted);font:12px var(--font-geist-sans),sans-serif}.ex-axis{stroke:var(--border);fill:none}.ex-guide{stroke:var(--border);fill:none;stroke-dasharray:3 5}.ex-query{stroke:var(--ex-violet);stroke-width:3px}.ex-key{stroke:var(--ex-mint);stroke-width:3px}.ex-query-dot,.ex-original-dot{fill:var(--ex-violet)}.ex-key-dot{fill:var(--ex-mint)}.ex-query-text{color:var(--ex-violet)}.ex-key-text{color:var(--ex-mint)}.ex-residual-line{stroke:var(--ex-violet);stroke-opacity:.4;stroke-dasharray:3 3}.ex-loss-curve{fill:none;stroke:var(--ex-violet);stroke-width:2px}.ex-update-line{stroke:var(--ex-mint);stroke-width:2px;stroke-dasharray:5 4}.ex-text-button{color:var(--foreground);text-underline-offset:4px;background:0 0;border:0;padding:10px 0;text-decoration:underline;font-size:13px!important}.ex-bar-row{grid-template-columns:70px minmax(0,1fr) 48px;align-items:center;gap:10px;margin:12px 0;font-size:12px;display:grid}.ex-bar-track{background:var(--panel-2);border-radius:3px;height:13px;overflow:hidden}.ex-bar-track i{background:var(--ex-violet);height:100%;transition:width .18s;display:block}.ex-bar-row output{text-align:right;font-variant-numeric:tabular-nums}.ex-attention-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:28px;display:grid}.ex-attention-grid{min-width:0;font-size:11px}.ex-attention-grid [role=row]{grid-template-columns:1.2fr repeat(4,1fr);gap:3px;margin:3px 0;display:grid}.ex-attention-grid [role=row]>span{text-align:center;border-radius:3px;padding:7px 2px;overflow:hidden}.ex-attention-grid [role=rowheader]{color:var(--muted);text-align:left!important}.ex-attention-grid [data-active=true]{outline:1px solid var(--ex-violet);outline-offset:2px;border-radius:3px}.ex-attention-grid .ex-masked{color:var(--muted);background:repeating-linear-gradient(135deg,transparent,transparent 3px,var(--border) 4px,transparent 5px);font-size:9px}.ex-attention-sum>p{margin:0 0 16px;font-size:13px}.ex-table-scroll{overflow:auto}.ex-numeric-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:12px}.ex-numeric-table th,.ex-numeric-table td{text-align:left;border-bottom:1px solid var(--border);padding:8px 10px;font-weight:400}.ex-numeric-table th{color:var(--soft)}.ex-transformer-trace{grid-template-columns:105px 1fr;gap:22px;margin:20px 0;display:grid}.ex-trace-tokens{gap:10px;display:grid}.ex-trace-tokens button{text-align:left}.ex-streams{gap:10px;display:grid}.ex-stream{opacity:.75;align-items:center;gap:8px;transition:opacity .18s;display:flex}.ex-stream[data-active=true]{opacity:1}.ex-stream>span{display:none}.ex-stream>div{flex:1;gap:7px;display:flex}.ex-stream>div>span{text-align:center;font-variant-numeric:tabular-nums;border-radius:5px;flex:1;padding:10px 2px}.ex-lora-branches{grid-template-columns:1fr;gap:18px;margin:24px 0;display:grid}.ex-lora-input,.ex-lora-output{background:var(--panel-2);border-radius:7px;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 16px;display:flex}.ex-lora-branches strong{font-variant-numeric:tabular-nums;font-weight:500}.ex-lora-paths{grid-template-columns:1fr 1.4fr;gap:22px;display:grid;position:relative}.ex-lora-paths>div{border-left:2px solid var(--ex-mint);padding:8px 16px}.ex-lora-paths>.ex-adapter-path{border-color:var(--ex-violet);gap:18px;display:grid}.ex-lora-paths span,.ex-lora-paths strong,.ex-lora-paths small{display:block}.ex-lora-paths span{color:var(--soft);font-size:13px}.ex-lora-paths strong{margin:6px 0;font-size:20px}.ex-lora-paths small{color:var(--muted);font-size:11px}.ex-cache-banks{background:color-mix(in srgb,var(--ex-violet) 5%,transparent);border-radius:10px;padding:24px}.ex-cache-banks>div>span{color:var(--muted);font-size:12px}.ex-query-heads{grid-template-columns:repeat(16,1fr);gap:5px;margin-top:12px;display:grid}.ex-query-heads i{background:var(--ex-violet);border-radius:3px;height:26px}.ex-cache-divider{text-align:center;color:var(--muted);padding:22px 0;font-size:13px}.ex-kv-heads{grid-template-columns:repeat(8,1fr);gap:7px;margin-top:12px;display:grid}.ex-kv-heads span{gap:3px;display:flex}.ex-kv-heads i{background:var(--ex-violet);border-radius:3px;flex:1;height:30px}.ex-kv-heads i+i{background:var(--ex-mint)}.ex-sampling-key{gap:24px;margin:22px 0;font-size:12px;display:flex}.ex-sampling-key span:before{content:"";background:var(--ex-violet);border-radius:2px;width:8px;height:8px;margin-right:7px;display:inline-block}.ex-sampling-key span+span:before{background:var(--ex-mint)}.ex-sampling-row{grid-template-columns:75px minmax(0,1fr) 100px;align-items:center;gap:16px;margin:17px 0;font-size:14px;display:grid}.ex-sampling-row small{color:var(--muted);font-size:11px;display:block}.ex-sampling-row .ex-bar-track{margin:5px 0}.ex-sampling-row output{text-align:right;font-variant-numeric:tabular-nums}.ex-bar-track .ex-filtered-bar{background:var(--ex-mint)}.ex-diffusion-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0;display:grid}.ex-pixels{margin:0}.ex-pixels svg{width:100%;height:auto}.ex-pixels figcaption{color:var(--soft);margin-bottom:12px;font-size:12px;line-height:1.5}@media (max-width:680px){.mechanism-lab{margin:24px 0;padding:20px 16px}.ex-attention-layout,.ex-geometry{grid-template-columns:1fr}.ex-geometry svg{max-width:360px;margin:auto}.ex-controls{grid-template-columns:1fr;gap:18px}.ex-flow{flex-direction:column;gap:14px}.ex-lora-paths{grid-template-columns:1fr;gap:10px}.ex-lora-paths>.ex-adapter-path{grid-template-columns:1fr 1fr;gap:12px}.ex-lora-paths strong{font-size:16px}.ex-transformer-trace{grid-template-columns:70px 1fr;gap:12px}.ex-trace-tokens button{padding-inline:5px;font-size:12px}.ex-stream>div{gap:4px}.ex-stream>div>span{font-size:12px}.ex-diffusion-grid{gap:12px}.ex-pixels figcaption{min-height:36px}.ex-sampling-row{grid-template-columns:56px minmax(0,1fr) 80px;gap:8px}.ex-sampling-key{gap:12px;font-size:11px}.ex-cache-banks{padding:18px 12px}.ex-query-heads{gap:3px}.ex-readout strong{font-size:19px}}@media (prefers-reduced-motion:reduce){.mechanism-lab *{transition:none!important;animation:none!important}}@media (max-width:680px){.mechanism-lab[data-lab=transformer] .ex-steps{grid-template-columns:1fr 1fr;display:grid}.mechanism-lab[data-lab=transformer] .ex-steps button{text-align:left}}
