.learning-story{padding:0!important;background:radial-gradient(ellipse at 48% 65%,#13333d,#080e18 65%);overflow:auto}.learning-canvas{position:relative;height:100%;min-height:560px;max-width:1800px;margin:auto;isolation:isolate}.learning-heading{position:absolute;left:4%;top:5%;width:45%}.learning-heading h2{font-size:clamp(32px,3.6vw,56px);line-height:1.07}.learning-explanation{position:absolute;left:53%;right:4%;top:6%;min-height:110px}.learning-explanation h3{font-size:23px;color:#7fe6ef;margin-bottom:8px}.learning-explanation p{font-size:19px;line-height:1.42;max-width:600px}.learning-cues{position:absolute;width:0;height:0;overflow:hidden}.learning-cue{display:block!important;height:0!important}.learning-controls{position:absolute;left:4%;right:4%;bottom:6%;display:flex;align-items:center;gap:20px;font-size:13px;color:#9dbfc9}.learning-controls button{font-size:12px;padding:5px 12px}.learning-sources{position:absolute;bottom:1.5%;left:4%;right:4%;display:flex;gap:18px;align-items:center;font-size:10px;line-height:1.35;color:#81949e}.learning-sources a{white-space:nowrap}.learning-story [data-show]{opacity:0;visibility:hidden;transform:translateY(15px);transition:opacity .65s,transform .7s,visibility .65s}.learning-story [data-show].learning-visible{opacity:1;visibility:visible;transform:none}.context-bracket{position:absolute;left:4%;right:4%;top:28%;border-top:1px solid #567483;padding-top:5px;font-size:12px;color:#9cc6cd}.context-bracket span{float:right;color:#8095a2}.token-ribbon{position:absolute;left:4%;right:4%;top:35%;height:54px;display:flex;gap:7px;z-index:2}.ribbon-token{position:relative;flex:1;display:flex;align-items:center;justify-content:center;border-bottom:2px solid #395460;background:#11202d;transition:background .65s,box-shadow .65s,border .65s,color .65s;min-width:0}.ribbon-token:nth-child(6){flex:1.55}.ribbon-token b{font-size:clamp(14px,1.8vw,25px);font-weight:500}.ribbon-token i{position:absolute;top:110%;font-size:12px;color:#6acdd8;font-style:normal;letter-spacing:4px;opacity:0;transition:opacity .6s}.learning-story[data-step]:not([data-step="0"]) .ribbon-token i{opacity:.85}.ribbon-token.attended{background:color-mix(in srgb,var(--head-color,#56e7f2) 22%,#10202a);border-color:var(--head-color,#56e7f2);box-shadow:0 0 28px color-mix(in srgb,var(--head-color,#56e7f2) 25%,transparent);color:white}.ribbon-token.query-token{border:1px solid #e1f9ff;box-shadow:0 0 22px #94eff444}.next-token{flex:.9;border:1px dashed #5b8c98;display:flex;align-items:center;justify-content:center;gap:8px;color:#8cf3ef}.next-token b{font-size:27px}.next-token small{font-size:10px;align-self:flex-end;margin-bottom:4px}.attention-wires,.training-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:-1}.attention-wires path{fill:none;stroke:var(--wire-color,#56e7f2);stroke-width:2;opacity:.6;stroke-dasharray:7 8;animation:learning-flow 1.7s linear infinite}.attention-head{position:absolute;top:57%;width:14%;height:68px;border-radius:50%;background:#0d1d29;border-color:var(--head-color);box-shadow:0 0 30px #050d19;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0}.attention-head span{font-size:20px}.attention-head small{font-size:11px;color:var(--head-color)}.head-1{left:12%;--head-color:#56e7f2}.head-2{left:32%;--head-color:#baa6ff}.head-3{left:52%;--head-color:#ffcb84}.attention-head[aria-pressed=true]{background:color-mix(in srgb,var(--head-color) 19%,#08131b);box-shadow:0 0 35px color-mix(in srgb,var(--head-color) 20%,transparent)}.feedforward{position:absolute;left:74%;width:22%;top:49%;text-align:center}.learning-network{width:100%;height:115px;overflow:visible}.learning-network line{stroke:#43828f;stroke-width:1;opacity:.3;transition:stroke 1s}.learning-network circle{fill:#78e9ee;animation:learning-neuron 2.8s var(--delay) infinite;filter:drop-shadow(0 0 4px #50dbea)}.feedforward strong{display:block;font-size:16px;font-weight:500}.feedforward small{display:block;font-size:11px;color:#96aeb9}.layer-stack{position:absolute;left:17%;top:75%;width:45%;height:59px;padding:8px 15px}.layer-stack i{position:absolute;inset:0;border:1px solid #48828d;background:#0e2632;transform:skewX(-13deg);z-index:-1}.layer-stack i:nth-child(1){transform:translate(15px,-10px) skewX(-13deg);opacity:.35}.layer-stack i:nth-child(2){transform:translate(8px,-5px) skewX(-13deg);opacity:.65}.layer-stack strong{font-size:17px;font-weight:500}.layer-stack span{display:block;font-size:12px;color:#a1c6ce}.context-result{position:absolute;left:67%;right:4%;top:76%;font-size:17px}.context-result b{color:#78f2ed}.context-result button{display:block;font-size:11px;padding:3px 9px;margin-top:7px}.training-corpus{position:absolute;left:4%;top:35%;width:27%}.training-corpus h3{font-size:24px}.training-corpus p{font-size:16px;line-height:1.4}.corpus-river{height:110px;overflow:hidden;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);margin:12px 0}.corpus-river span{display:block;white-space:nowrap;font-size:14px;color:#72b9c7;line-height:32px;animation:corpus-flow 6s linear infinite}.foundation-core{position:absolute;left:40%;top:35%;width:22%;text-align:center;transition:transform 1s,filter 1s}.foundation-core .learning-network{height:170px}.foundation-core h3{font-size:23px;color:#90ebef;line-height:1.1}.foundation-core p{font-size:13px;margin-top:9px}.training-prediction{position:absolute;left:72%;right:4%;top:34%}.training-prediction>p{font-size:18px;margin-bottom:12px;color:#bce4e7}.training-prediction h3{font-size:21px;margin-bottom:14px}.probability{height:31px;position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-size:14px;padding:0 6px}.probability i{position:absolute;left:0;top:0;height:100%;width:var(--prob);background:#27748555;border-left:2px solid #74deea;z-index:-1;transform-origin:left;animation:prob-in .8s both}.probability b{font-weight:400}.training-prediction small{font-size:10px;color:#8399a8}.training-wires path{fill:none;stroke:#63d2df;stroke-width:2;stroke-dasharray:7 8;opacity:0;transition:opacity .7s;animation:learning-flow 2s linear infinite}.foundation-story[data-step="1"] .corpus-route,.foundation-story[data-step="2"] .corpus-route,.foundation-story[data-step="3"] .corpus-route,.foundation-story[data-step="2"] .prediction-route,.foundation-story[data-step="3"] .prediction-route{opacity:.8}.foundation-story[data-step="3"] .backward-route{opacity:1;stroke:#ffbd7c;animation-direction:normal}.foundation-story[data-step="3"] .foundation-core .learning-network line{stroke:#ffbd7c;opacity:.7}.training-target{position:absolute;left:62%;right:4%;top:68%;font-size:15px}.training-target b{color:#ffd399}.training-target span{display:block;font-size:13px;color:#ffc68c;margin-top:5px}.foundation-definition{position:absolute;left:15%;right:15%;top:77%;text-align:center}.foundation-definition h3{display:none}.foundation-definition p{font-size:19px;line-height:1.4}.foundation-story[data-step="4"] .foundation-core{transform:scale(1.25);filter:drop-shadow(0 0 35px #58dfea33)}.tuning-example{position:absolute;top:35%;width:28%}.tuning-conversation{left:4%}.tuning-code{right:4%}.tuning-example h3{font-size:25px;color:#c2b4ff}.tuning-example>p{font-size:17px;line-height:1.4}.tuning-example .tuning-sample{border-left:2px solid #ac98f9;padding-left:12px;margin:16px 0;color:white;font-size:16px}.tuning-sample em,.tuning-sample code{color:#9bbcc6;font-size:14px}.tuning-example strong{display:block;font-size:12px;font-weight:500;color:#ab9de0;margin-top:13px}.foundation-story[data-step="5"] .conversation-route,.foundation-story[data-step="6"] .specialize-route,.foundation-story[data-step="7"] .specialize-route{opacity:1;stroke:#b7a2f8}.inference-caption{position:absolute;left:22%;right:22%;top:79%;display:flex;gap:17px;font-size:15px;line-height:1.4}.inference-caption b{white-space:nowrap;color:#77dfec}.inference-caption span{color:#b3cbd4}.learning-story[hidden] *{animation-play-state:paused!important}@keyframes learning-flow{to{stroke-dashoffset:-60}}@keyframes learning-neuron{50%{opacity:.3;filter:drop-shadow(0 0 1px #50dbea)}}@keyframes corpus-flow{to{transform:translateY(-64px)}}@keyframes prob-in{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.learning-story *{animation:none!important;transition:none!important}}
@media(max-width:800px){.learning-canvas{min-width:760px}.learning-heading h2{font-size:32px}.learning-explanation h3{font-size:19px}.learning-explanation p{font-size:16px}.ribbon-token b{font-size:14px}.token-ribbon{gap:4px}.learning-sources{font-size:9px;gap:9px}.training-corpus h3,.tuning-example h3{font-size:21px}.tuning-example>p{font-size:15px}}

.probability i{transition:width 1.6s ease}.foundation-story[data-step="3"] .probability:first-of-type i{background:#43857a77}
/* Attention: inspect one learned weighting, then combine the parallel outputs. */
.transformer-story .learning-heading{width:46%}.transformer-story .learning-heading h2{font-size:clamp(30px,3.4vw,52px)}.transformer-story .learning-explanation{top:5%}.transformer-story .learning-explanation p{font-size:18px}.transformer-story .token-ribbon{top:35%}.transformer-story .ribbon-token i{transition:opacity .3s}.transformer-story[data-step]:not([data-step="0"]):not([data-step="1"]) .ribbon-token i{opacity:0}.token-weight{position:absolute;top:111%;font-size:15px;color:var(--head-color);opacity:0;transition:opacity .5s;white-space:nowrap}.transformer-story[data-step]:not([data-step="0"]):not([data-step="1"]) .token-weight{opacity:1}.token-weight:after{content:'';position:absolute;left:0;bottom:-5px;width:var(--attention-weight);height:2px;background:var(--head-color);transition:width .7s}.head-selection{position:absolute;left:4%;top:52%;width:21%;display:flex;flex-direction:column;gap:13px}.head-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:0;border-left:3px solid var(--head-color);border-radius:0;padding:8px 14px;background:transparent;text-align:left;width:100%;height:56px;--head-color:#56e7f2;transition:background .5s,box-shadow .5s}.head-choice:nth-child(2){--head-color:#baa6ff}.head-choice:nth-child(3){--head-color:#ffcb84}.head-choice b{font-size:22px;color:var(--head-color);font-weight:500}.head-choice span{font-size:12px;color:#a7c1ce}.head-choice[aria-pressed=true]{background:color-mix(in srgb,var(--head-color) 13%,transparent);box-shadow:0 0 25px color-mix(in srgb,var(--head-color) 7%,transparent)}.head-calculation{position:absolute;left:30%;width:37%;top:53%;height:190px}.head-calculation>div{position:absolute;inset:0}.head-calculation h3,.heads-merge h3,.merged-output h3{font-size:21px;color:var(--selected-head-color,#56e7f2);line-height:1.25;margin:0 0 10px}.head-calculation p{font-size:17px;line-height:1.4;margin:8px 0}.head-calculation p b{color:#c9eef3}.qk-explanation>span{display:block;font-size:15px;color:#77dae7;margin-top:12px}.weight-formula{font-size:19px;color:var(--selected-head-color);line-height:1.5;margin:12px 0}.head-calculation .value-definition{font-size:15px;color:#9cb9c4}.head-output{position:absolute;left:74%;width:22%;top:54%;height:165px;text-align:center}.head-output>span{font-size:18px;color:var(--selected-head-color)}.head-output p{font-size:18px;line-height:1.35}.head-output small{display:block;font-size:12px;color:#9eb8c5;margin-top:8px}.head-vector{display:flex;gap:7px;align-items:center;height:57px;margin:13px 20px}.head-vector i{flex:1;background:var(--selected-head-color);opacity:.8;box-shadow:0 0 15px color-mix(in srgb,var(--selected-head-color) 30%,transparent);animation:head-vector-in .8s both}.heads-merge{position:absolute;left:34%;width:30%;top:52%}.heads-merge h3{color:#d7eef1}.merge-vectors{padding:8px 0}.merge-vector{display:flex;gap:8px;align-items:center;height:35px;color:var(--head-color)}.merge-vector span{font-size:16px;min-width:74px}.merge-vector i{width:28px;height:14px;background:var(--head-color);opacity:.7;animation:head-vector-in 1s both}.merge-vector i:nth-child(3){opacity:.3}.merge-vector i:nth-child(4){opacity:1}.heads-merge p{font-size:16px;line-height:1.4;color:#a7c7d0;margin-top:8px}.merged-output{position:absolute;left:72%;width:24%;top:52%;text-align:center}.merged-output h3{color:#d7eef1;font-size:20px}.combined-vector{display:flex;justify-content:center;gap:5px;height:25px;margin:18px 0}.combined-vector i{width:23px;background:#56e7f2;animation:head-vector-in 1.5s both}.combined-vector i:nth-child(n+3){background:#baa6ff}.combined-vector i:nth-child(n+5){background:#ffcb84}.merged-output p{font-size:17px;line-height:1.4}.transformer-story .feedforward{left:75%;width:18%;top:66%}.transformer-story .feedforward .learning-network{height:68px}.transformer-story .feedforward strong{font-size:16px}.transformer-story .feedforward small{font-size:11px}.head-layer-note{position:absolute;left:34%;width:33%;top:82%;font-size:17px;color:#8fdfeb}.transformer-story .context-result{left:32%;right:32%;top:80%;font-size:19px}.transformer-story .learning-sources{font-size:10px}.transformer-story .learning-controls{bottom:6%}.transformer-story[data-step="8"] .heads-merge p{visibility:hidden}@keyframes head-vector-in{from{transform:scaleY(.1);opacity:.1}to{transform:scaleY(1)}}
@media(max-width:800px){.transformer-story .learning-heading h2{font-size:30px}.transformer-story .learning-explanation p{font-size:15px}.head-calculation h3,.heads-merge h3,.merged-output h3{font-size:18px}.head-calculation p{font-size:15px}.weight-formula{font-size:16px}.head-choice span{font-size:10px}.head-choice b{font-size:18px}.head-output p{font-size:16px}.transformer-story .context-result{font-size:16px}.head-layer-note{font-size:15px}}
.transformer-story [data-show]:not(.learning-visible){visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s}.transformer-story [data-show].learning-visible{transition:opacity .65s,transform .7s,visibility 0s}