/* VGG16 expanded-view dark canvas; generation and page controls retain their light theme. */
body[data-page="dl/transformer-live"]{--ng-ink:#173746;--ng-blue:#126381;--ng-line:#dbe5e7}
body[data-page="dl/transformer-live"] .fig,body[data-page="dl/transformer-live"] .panel{background:#fff;border-color:var(--ng-line)}
body[data-page="dl/transformer-live"] .fig canvas{background:linear-gradient(#0e1730,#070b16)}
body[data-page="dl/transformer-live"] .ph .one,body[data-page="dl/transformer-live"] .cap,body[data-page="dl/transformer-live"] .legend{color:var(--ng-ink)}
body[data-page="dl/transformer-live"] button{border-color:var(--ng-line);color:var(--ng-ink)}
body[data-page="dl/transformer-live"] button:hover{background:#e9f4f6}
body[data-page="dl/transformer-live"] button.primary{background:#136880;color:#fff}
body[data-page="dl/transformer-live"] input[type=range],body[data-page="dl/transformer-live"] input[type=checkbox]{accent-color:#15738c}
body[data-page="dl/transformer-live"] .hud3d .hl{color:#CAD5EA;background:rgba(10,16,32,.88);border-color:#30405E}
body[data-page="dl/transformer-live"] .hud3d .hl b{color:#B5C2DA}
body[data-page="dl/transformer-live"] .hud3d .hp{background:rgba(10,16,32,.92);border-color:#30405E}
body[data-page="dl/transformer-live"] .hud3d .seg{color:#B5C2DA;background:#16223B}
body[data-page="dl/transformer-live"] .hud3d .seg::before{background:rgba(34,211,238,.22)}
body[data-page="dl/transformer-live"] .hud3d .seg.on{color:#67E8F9;box-shadow:inset 0 0 0 1px #22D3EE}
body[data-page="dl/transformer-live"] .hud3d .seg.done{color:#67E8F9}
body[data-page="dl/transformer-live"] .hud3d .seg:hover{color:#A5F3FC;background:#203754}
body[data-page="dl/transformer-live"] .hud3d .cur{color:#E8ECF5}

/* Beginner reading guide. The original canvas and matrix layout are retained. */
body[data-page="dl/transformer-live"] .ng-guide-nav{color:#173746;margin:0 0 10px;font-size:12px}
body[data-page="dl/transformer-live"] .ng-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;font-weight:600}
body[data-page="dl/transformer-live"] .ng-guide-toggle{display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;font-weight:400}
body[data-page="dl/transformer-live"] .ng-guide-toggle input{accent-color:#167892;margin:0}
body[data-page="dl/transformer-live"] .ng-guide-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body[data-page="dl/transformer-live"] .ng-stage-button{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;padding:9px 4px;min-width:0;border-radius:7px;white-space:normal}
body[data-page="dl/transformer-live"] .ng-stage-button[aria-pressed="true"]{border-color:#2186a4;color:#126381;background:#edf6f8;box-shadow:inset 0 -2px #2186a4}
body[data-page="dl/transformer-live"] .ng-stage-number{font-size:11px;font-weight:700;opacity:.75}
body[data-page="dl/transformer-live"] .ng-identity-key{display:flex;gap:6px 17px;align-items:center;flex-wrap:wrap;margin:10px 0 6px;font-size:11.5px;color:#466370}
body[data-page="dl/transformer-live"] .ng-identity-key span{display:flex;align-items:center;gap:4px}
body[data-page="dl/transformer-live"] .ng-identity-key i{display:inline-block;flex-shrink:0}
body[data-page="dl/transformer-live"] .ng-weight-dot{width:7px;height:7px;border:1.5px solid #736882;border-radius:1px}
body[data-page="dl/transformer-live"] .ng-feature-dot{width:9px;height:9px;background:#2186a4;border-radius:1px}
body[data-page="dl/transformer-live"] .ng-main-line,body[data-page="dl/transformer-live"] .ng-res-line{width:18px;height:0;border-top:2px solid #2186a4;margin-left:4px}
body[data-page="dl/transformer-live"] .ng-res-line{border-color:#a05f82}
body[data-page="dl/transformer-live"] .ng-guide-view-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#466370;font-size:11px}
body[data-page="dl/transformer-live"] .ng-guide-view-tools button{border:0;background:none;padding:3px 0;color:#126381;text-decoration:underline;text-underline-offset:3px;font-size:12px}
body[data-page="dl/transformer-live"] .ng-reading-overlay{position:absolute;pointer-events:none;overflow:hidden;z-index:3;font-family:var(--sans);color:#E8ECF5}
body[data-page="dl/transformer-live"] .ng-reading-overlay[hidden],body[data-page="dl/transformer-live"] .ng-reading-overlay [hidden]{display:none!important}
body[data-page="dl/transformer-live"] .ng-guide-lines{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
body[data-page="dl/transformer-live"] .ng-stage-note,body[data-page="dl/transformer-live"] .ng-matrix-note,body[data-page="dl/transformer-live"] .ng-res-note,body[data-page="dl/transformer-live"] .ng-res-explain{position:absolute;left:0;top:0;box-sizing:border-box;border-radius:7px;background:rgba(12,20,38,.96);box-shadow:0 2px 7px #00000040;line-height:1.5}
body[data-page="dl/transformer-live"] .ng-stage-note{width:178px;border:1px solid #385377;border-left:3px solid #22D3EE;padding:9px 11px}
body[data-page="dl/transformer-live"] .ng-stage-note strong{display:block;font-size:14px;line-height:1.4;letter-spacing:-.15px}
body[data-page="dl/transformer-live"] .ng-stage-kicker{display:block;font-size:10px;color:#A3AEC6;letter-spacing:1px;margin-bottom:3px}
body[data-page="dl/transformer-live"] .ng-stage-description{display:block;font-size:11.5px;margin-top:5px}
body[data-page="dl/transformer-live"] .ng-shape{display:block;font-size:11px;color:#67E8F9;margin-top:5px;border-top:1px solid #30405E;padding-top:5px}
body[data-page="dl/transformer-live"] .ng-stage-note.is-compact{width:168px;padding:7px 9px}
body[data-page="dl/transformer-live"] .ng-stage-note.is-compact .ng-stage-description,body[data-page="dl/transformer-live"] .ng-stage-note.is-compact .ng-shape{display:none}
body[data-page="dl/transformer-live"] .ng-matrix-note{padding:9px 11px;border:1px solid #30405E}
body[data-page="dl/transformer-live"] .ng-matrix-note strong{display:block;font-size:12px;margin-top:6px}
body[data-page="dl/transformer-live"] .ng-matrix-detail{display:block;font-size:11.5px;margin-top:4px;color:#CAD5EA}
body[data-page="dl/transformer-live"] .ng-kind{display:inline-block;color:#67E8F9;background:#123247;border:1px solid #275571;border-radius:4px;font-size:10px;padding:1px 5px}
body[data-page="dl/transformer-live"] .ng-kind.is-weight{color:#D3BEFD;background:#29233D;border-color:#58486F}
body[data-page="dl/transformer-live"] .ng-follow-badge,body[data-page="dl/transformer-live"] .ng-flow-hint{position:absolute;background:rgba(12,20,38,.94);border-radius:5px;padding:3px 7px;font-size:11px;line-height:18px}
body[data-page="dl/transformer-live"] .ng-follow-badge{right:12px;color:#FDE68A;border:1px solid #826533}
body[data-page="dl/transformer-live"] .ng-flow-hint{left:12px;color:#67E8F9}
body[data-page="dl/transformer-live"] .ng-res-note{font-size:11.5px;color:#F9A8D4;border:1px solid #754461;padding:4px 7px;white-space:nowrap}
body[data-page="dl/transformer-live"] .ng-res-explain{width:145px;font-size:11px;color:#F9A8D4;padding:5px 7px;border:1px solid #754461}
body[data-page="dl/transformer-live"] .ng-add-symbol{position:absolute;top:0;left:0;width:22px;height:22px;display:grid;place-items:center;background:#302036;border:1.5px solid #F472B6;border-radius:50%;font:600 19px/1 var(--sans);color:#F9A8D4}
body[data-page="dl/transformer-live"] .ng-weight-tag{position:absolute;top:0;left:0;font-size:10px;line-height:18px;padding:1px 5px;background:rgba(31,25,48,.97);color:#D3BEFD;border:1px solid #58486F;border-radius:4px;white-space:nowrap}
body[data-page="dl/transformer-live"] .fig.fs .ng-guide-nav{flex-shrink:0}
body[data-page="dl/transformer-live"] .fig.fs .ng-guide-heading{margin-bottom:6px}
body[data-page="dl/transformer-live"] .fig.fs .ng-identity-key{margin-top:6px}
body[data-page="dl/transformer-live"] .ng-stage-note.is-active{border-color:#3A738D;border-left-color:#22D3EE;background:rgba(17,39,58,.97)}
body[data-page="dl/transformer-live"] .fig.fs .ng-stage-note{width:218px}
body[data-page="dl/transformer-live"] .fig.fs .ng-stage-note strong{font-size:17px}
body[data-page="dl/transformer-live"] .fig.fs .ng-stage-description,body[data-page="dl/transformer-live"] .fig.fs .ng-matrix-detail{font-size:13px}
body[data-page="dl/transformer-live"] .fig.fs .ng-shape,body[data-page="dl/transformer-live"] .fig.fs .ng-res-note{font-size:12px}
body[data-page="dl/transformer-live"] .fig.fs .ng-matrix-note strong{font-size:14px}
body[data-page="dl/transformer-live"] .ng-follow-control{padding:12px 0;border-top:1px solid #e2e9ec;border-bottom:1px solid #e2e9ec;margin:3px 0 16px;font-size:12px;color:#173746}
body[data-page="dl/transformer-live"] .ng-follow-control>strong{display:block;margin-bottom:8px}
body[data-page="dl/transformer-live"] .ng-token-buttons{display:flex;flex-wrap:wrap;gap:5px}
body[data-page="dl/transformer-live"] .ng-token{min-width:32px;min-height:32px;padding:3px 8px;font-size:15px;border-radius:6px}
body[data-page="dl/transformer-live"] .ng-token[aria-pressed="true"]{background:#fff3d7;border-color:#bd7c18;box-shadow:inset 0 -2px #bd7c18;color:#80510a}
body[data-page="dl/transformer-live"] .ng-token-summary{color:#80510a;font-weight:600;margin:8px 0 5px}
body[data-page="dl/transformer-live"] .ng-token-help,body[data-page="dl/transformer-live"] .ng-generation-note{font-size:11.5px;line-height:1.6;margin:5px 0;color:#466370}
body[data-page="dl/transformer-live"] .ng-generation-note{color:#126381}
body[data-page="dl/transformer-live"] .ng-guide-nav button:focus-visible,body[data-page="dl/transformer-live"] .ng-token:focus-visible{outline:2px solid #bd7c18;outline-offset:2px}
@media(max-width:700px){
 body[data-page="dl/transformer-live"] .ng-guide-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-page="dl/transformer-live"] .ng-guide-view-tools span{max-width:75%;font-size:10px}
 body[data-page="dl/transformer-live"] .ng-flow-key{display:none}
 body[data-page="dl/transformer-live"] .ng-stage-note.is-compact{width:133px}
 body[data-page="dl/transformer-live"] .ng-stage-note strong{font-size:12px}
}
body[data-page="dl/transformer-live"] .fstools button{background:rgba(255,255,255,.95);color:#173746;border-color:#dbe5e7}
body[data-page="dl/transformer-live"] .fstools button:hover{background:#e9f4f6;border-color:#167892}

/* Generation entry: uses the same sequence and probabilities as the 3D model. */
body[data-page="dl/transformer-live"] .ng-intro{margin:26px 0 0;padding:24px 26px;background:#fff;border:1px solid #dbe5e7;border-top:3px solid #167892;border-radius:12px;color:#173746;scroll-margin-top:20px}
body[data-page="dl/transformer-live"] .ng-intro-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
body[data-page="dl/transformer-live"] .ng-eyebrow{font-size:12px;color:#126381;font-weight:600;letter-spacing:.08em}
body[data-page="dl/transformer-live"] .ng-intro h2{margin:7px 0 0;font-size:clamp(20px,2.1vw,28px);line-height:1.4;letter-spacing:-.02em}
body[data-page="dl/transformer-live"] .ng-intro-heading a{color:#126381;white-space:nowrap;font-size:13px;text-underline-offset:4px}
body[data-page="dl/transformer-live"] .ng-token-definition{font-size:14px;line-height:1.8;margin:12px 0 22px;max-width:850px;color:#355666}
body[data-page="dl/transformer-live"] .ng-token-definition b{color:#173746;font-weight:600}
body[data-page="dl/transformer-live"] .ng-intro-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr);gap:28px}
body[data-page="dl/transformer-live"] .ng-generation,body[data-page="dl/transformer-live"] .ng-generation-settings{min-width:0}
body[data-page="dl/transformer-live"] .ng-generation-settings{border-left:1px solid #e2e9ec;padding-left:25px}
body[data-page="dl/transformer-live"] .ng-output-label,body[data-page="dl/transformer-live"] .ng-candidate-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;font-size:14px}
body[data-page="dl/transformer-live"] .ng-output-label>span,body[data-page="dl/transformer-live"] .ng-candidate-heading>span{font-size:12px;color:#466370}
body[data-page="dl/transformer-live"] .ng-output{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:64px;margin:10px 0 22px;padding:15px;background:#f1f6f7;border-radius:8px;border:1px solid #e2e9ec}
body[data-page="dl/transformer-live"] .ng-output-token{display:inline-grid;place-items:center;min-width:26px;font-size:27px;font-weight:600;line-height:1.5}
body[data-page="dl/transformer-live"] .ng-output-token.is-generated{color:#126381;border-bottom:2px solid #2793b0}
body[data-page="dl/transformer-live"] .ng-end{font-size:12px;color:#466370;border:1px solid #d1dfe4;border-radius:5px;padding:3px 6px;margin-left:6px}
body[data-page="dl/transformer-live"] .ng-candidates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 18px}
body[data-page="dl/transformer-live"] .ng-candidate{border:1px solid #dbe5e7;border-radius:7px;padding:10px 12px;min-width:0;background:#fff}
body[data-page="dl/transformer-live"] .ng-candidate strong{font-size:23px;line-height:1.4;display:block;font-weight:600}
body[data-page="dl/transformer-live"] .ng-candidate>span{display:block;font-size:13px;color:#355666;margin:2px 0 9px;font-variant-numeric:tabular-nums}
body[data-page="dl/transformer-live"] .ng-candidate.is-picked{border-color:#167892;background:#eaf5f7;box-shadow:inset 0 0 0 1px #167892}
body[data-page="dl/transformer-live"] .ng-prob-track{height:5px;background:#e9eff1;border-radius:4px;overflow:hidden}
body[data-page="dl/transformer-live"] .ng-prob-track i{display:block;height:100%;background:#2186a4;border-radius:4px;transition:width .18s}
body[data-page="dl/transformer-live"] .ng-generation-actions{display:flex;gap:8px;flex-wrap:wrap}
body[data-page="dl/transformer-live"] .ng-intro button{font-size:14px;min-height:40px;padding:8px 14px;line-height:1.5;white-space:normal}
body[data-page="dl/transformer-live"] .ng-intro button:disabled{opacity:.45;cursor:default}
body[data-page="dl/transformer-live"] .ng-status{min-height:44px;margin:12px 0 0;font-size:14px;line-height:1.7;color:#126381}
body[data-page="dl/transformer-live"] .ng-generation-settings .ctl{margin:0 0 15px}
body[data-page="dl/transformer-live"] .ng-generation-settings .ctl>label{display:block;font-size:14px;font-weight:600;margin-bottom:9px}
body[data-page="dl/transformer-live"] #inp{width:100%;padding:10px 12px;border:1px solid #bdced5;border-radius:7px;font:inherit;font-size:18px;box-sizing:border-box;color:#173746;background:#fff}
body[data-page="dl/transformer-live"] .ng-input-actions{display:flex;gap:8px;margin:8px 0}
body[data-page="dl/transformer-live"] .ng-generation-settings small{display:block;font-size:12px;line-height:1.7;color:#466370}
body[data-page="dl/transformer-live"] .ng-sampling{border-top:1px solid #e2e9ec;border-bottom:1px solid #e2e9ec;padding:12px 0;font-size:14px}
body[data-page="dl/transformer-live"] .ng-sampling summary,body[data-page="dl/transformer-live"] .ng-model-info summary{cursor:pointer;font-weight:600;color:#126381;line-height:1.6}
body[data-page="dl/transformer-live"] .ng-sample-choice{display:flex;gap:8px;align-items:flex-start;margin:14px 0;line-height:1.6}
body[data-page="dl/transformer-live"] .ng-sample-choice input{margin:4px 0 0;flex-shrink:0}
body[data-page="dl/transformer-live"] .ng-temp-label{display:flex;justify-content:space-between;align-items:center;font-size:14px}
body[data-page="dl/transformer-live"] #temp{width:100%;margin:10px 0}
body[data-page="dl/transformer-live"] .ng-temp-help,body[data-page="dl/transformer-live"] .ng-mode-note,body[data-page="dl/transformer-live"] .ng-boundary{font-size:12px;line-height:1.8;margin:5px 0;color:#355666}
body[data-page="dl/transformer-live"] .ng-mode-note{color:#126381}
body[data-page="dl/transformer-live"] .ng-boundary{margin:13px 0 0}
body[data-page="dl/transformer-live"] #ng-model{scroll-margin-top:20px}
body[data-page="dl/transformer-live"] .ng-model-info{margin-top:18px;font-size:12px}
body[data-page="dl/transformer-live"] .ng-intro [hidden]{display:none!important}
body[data-page="dl/transformer-live"] .ng-intro :is(button,input,summary,a):focus-visible{outline:2px solid #bd7c18;outline-offset:3px}
@media(max-width:850px){
 body[data-page="dl/transformer-live"] .ng-intro-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 body[data-page="dl/transformer-live"] .ng-generation-settings{padding:20px 0 0;border-left:0;border-top:1px solid #e2e9ec}
 body[data-page="dl/transformer-live"] .ng-generation-settings .ctl{max-width:440px}
}
@media(max-width:520px){
 body[data-page="dl/transformer-live"] .ng-intro{padding:18px 15px;margin:20px 0 0}
 body[data-page="dl/transformer-live"] .ng-intro-heading{align-items:flex-start;flex-direction:column;gap:9px}
 body[data-page="dl/transformer-live"] .ng-token-definition{font-size:13px;margin-bottom:18px}
 body[data-page="dl/transformer-live"] .ng-candidates{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-page="dl/transformer-live"] .ng-output{gap:3px;padding:10px}
 body[data-page="dl/transformer-live"] .ng-output-token{font-size:24px;min-width:23px}
 body[data-page="dl/transformer-live"] .ng-generation-actions button{flex:1 1 auto;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){body[data-page="dl/transformer-live"] .ng-prob-track i{transition:none}}