marketing-shibata50/claude-code-ultimate-guide
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(diagrams): add color:#333 to light-fill nodes for dark mode contrast

Browse source 
Nodes with fill:#F5E6D3 (beige), fill:#B8B8B8 (gray), fill:#7BC47F (green)
had no explicit text color — GitHub dark mode rendered white text on light
backgrounds, making them unreadable.

Added color:#333 to all 3 light fills across all 10 diagram files.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Florian BRUNIAUX 2026-02-22 15:59:07 +01:00
parent dbb62306d7
commit 8a75fd2fd2
10 changed files with 150 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

32
guide/diagrams/01-foundations.md
View file

@ -28,17 +28,17 @@ flowchart TD
D1[Glob, Grep, Read,\nBash, Task, MCP tools] --> D
E1[Previous messages\n+ tool results] --> E
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#6DB3F2,color:#fff
style C fill:#6DB3F2,color:#fff
style D fill:#6DB3F2,color:#fff
style E fill:#6DB3F2,color:#fff
style F fill:#E87E2F,color:#fff
style G fill:#7BC47F
style B1 fill:#B8B8B8
style C1 fill:#B8B8B8
style D1 fill:#B8B8B8
style E1 fill:#B8B8B8
style G fill:#7BC47F,color:#333
style B1 fill:#B8B8B8,color:#333
style C1 fill:#B8B8B8,color:#333
style D1 fill:#B8B8B8,color:#333
style E1 fill:#B8B8B8,color:#333
```
<details>
@ -85,16 +85,16 @@ flowchart LR
H --> I(Generate Response)
I --> J([Display to User])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#6DB3F2,color:#fff
style C fill:#6DB3F2,color:#fff
style D fill:#E87E2F,color:#fff
style E fill:#E87E2F,color:#fff
style F fill:#E87E2F,color:#fff
style G fill:#B8B8B8
style H fill:#B8B8B8
style G fill:#B8B8B8,color:#333
style H fill:#B8B8B8,color:#333
style I fill:#6DB3F2,color:#fff
style J fill:#7BC47F
style J fill:#7BC47F,color:#333
```
<details>
@ -141,7 +141,7 @@ flowchart TD
I -->|No| F
I -->|Yes| H
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#E87E2F,color:#fff
style C fill:#E87E2F,color:#fff
style D fill:#E87E2F,color:#fff
@ -149,7 +149,7 @@ flowchart TD
style I fill:#E87E2F,color:#fff
style E fill:#6DB3F2,color:#fff
style F fill:#6DB3F2,color:#fff
style H fill:#7BC47F
style H fill:#7BC47F,color:#333
```
<details>
@ -198,16 +198,16 @@ flowchart TD
B3["Use only in:\nCI/CD, sandboxed\nenvironments"] --> B2
end
style D2 fill:#7BC47F
style D2 fill:#7BC47F,color:#333
style D4 fill:#E87E2F,color:#fff
style D6 fill:#E87E2F,color:#fff
style D8 fill:#E87E2F,color:#fff
style A2 fill:#7BC47F
style A4 fill:#7BC47F
style A2 fill:#7BC47F,color:#333
style A4 fill:#7BC47F,color:#333
style A6 fill:#E87E2F,color:#fff
style A8 fill:#E87E2F,color:#fff
style B2 fill:#E85D5D,color:#fff
style B3 fill:#F5E6D3
style B3 fill:#F5E6D3,color:#333
```
<details>

26
guide/diagrams/02-context-and-sessions.md
View file

@ -42,9 +42,9 @@ flowchart LR
GREEN --> BLUE --> ORANGE --> RED
style G1 fill:#7BC47F
style G2 fill:#7BC47F
style G3 fill:#7BC47F
style G1 fill:#7BC47F,color:#333
style G2 fill:#7BC47F,color:#333
style G3 fill:#7BC47F,color:#333
style B1 fill:#6DB3F2,color:#fff
style B2 fill:#6DB3F2,color:#fff
style B3 fill:#6DB3F2,color:#fff
@ -94,13 +94,13 @@ flowchart TD
style A fill:#E87E2F,color:#fff
style B fill:#6DB3F2,color:#fff
style C fill:#6DB3F2,color:#fff
style D fill:#F5E6D3
style E fill:#B8B8B8
style A1 fill:#B8B8B8
style B1 fill:#B8B8B8
style C1 fill:#B8B8B8
style D1 fill:#B8B8B8
style E1 fill:#B8B8B8
style D fill:#F5E6D3,color:#333
style E fill:#B8B8B8,color:#333
style A1 fill:#B8B8B8,color:#333
style B1 fill:#B8B8B8,color:#333
style C1 fill:#B8B8B8,color:#333
style D1 fill:#B8B8B8,color:#333
style E1 fill:#B8B8B8,color:#333
```
<details>
@ -199,9 +199,9 @@ flowchart TD
G6 -->|Yes| G7(/compact)
G7 --> G2
G6 -->|No| G2
style G1 fill:#7BC47F
style G4 fill:#7BC47F
style G5 fill:#7BC47F
style G1 fill:#7BC47F,color:#333
style G4 fill:#7BC47F,color:#333
style G5 fill:#7BC47F,color:#333
style G3 fill:#E87E2F,color:#fff
style G6 fill:#E87E2F,color:#fff
style G7 fill:#6DB3F2,color:#fff

20
guide/diagrams/03-configuration-system.md
View file

@ -27,10 +27,10 @@ flowchart TD
style A fill:#E87E2F,color:#fff
style B fill:#6DB3F2,color:#fff
style C fill:#6DB3F2,color:#fff
style D fill:#F5E6D3
style E fill:#B8B8B8
style A1 fill:#B8B8B8
style E1 fill:#B8B8B8
style D fill:#F5E6D3,color:#333
style E fill:#B8B8B8,color:#333
style A1 fill:#B8B8B8,color:#333
style E1 fill:#B8B8B8,color:#333
```
<details>
@ -84,11 +84,11 @@ flowchart LR
Q --> |Complex sub-task| AGENTS
style S1 fill:#6DB3F2,color:#fff
style S4 fill:#7BC47F
style C1 fill:#F5E6D3
style C4 fill:#7BC47F
style S4 fill:#7BC47F,color:#333
style C1 fill:#F5E6D3,color:#333
style C4 fill:#7BC47F,color:#333
style A1 fill:#E87E2F,color:#fff
style A4 fill:#7BC47F
style A4 fill:#7BC47F,color:#333
style Q fill:#E87E2F,color:#fff
```
@ -186,8 +186,8 @@ flowchart TD
style I fill:#E87E2F,color:#fff
style K fill:#6DB3F2,color:#fff
style M fill:#6DB3F2,color:#fff
style C fill:#7BC47F
style J fill:#7BC47F
style C fill:#7BC47F,color:#333
style J fill:#7BC47F,color:#333
```
<details>

20
guide/diagrams/04-architecture-internals.md
View file

@ -29,13 +29,13 @@ flowchart TD
J -->|Yes| A
J -->|No| K([Session ends])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style C fill:#E87E2F,color:#fff
style D fill:#E87E2F,color:#fff
style F fill:#6DB3F2,color:#fff
style I fill:#7BC47F
style I fill:#7BC47F,color:#333
style J fill:#E87E2F,color:#fff
style K fill:#B8B8B8
style K fill:#B8B8B8,color:#333
```
<details>
@ -107,15 +107,15 @@ flowchart TD
style R2 fill:#6DB3F2,color:#fff
style R3 fill:#6DB3F2,color:#fff
style R4 fill:#6DB3F2,color:#fff
style W1 fill:#F5E6D3
style W2 fill:#F5E6D3
style W3 fill:#F5E6D3
style W1 fill:#F5E6D3,color:#333
style W2 fill:#F5E6D3,color:#333
style W3 fill:#F5E6D3,color:#333
style E1 fill:#E85D5D,color:#fff
style E2 fill:#E87E2F,color:#fff
style WB1 fill:#7BC47F
style WB2 fill:#7BC47F
style WF1 fill:#B8B8B8
style WF2 fill:#B8B8B8
style WB1 fill:#7BC47F,color:#333
style WB2 fill:#7BC47F,color:#333
style WF1 fill:#B8B8B8,color:#333
style WF2 fill:#B8B8B8,color:#333
```
<details>

34
guide/diagrams/05-mcp-ecosystem.md
View file

@ -46,18 +46,18 @@ flowchart TD
end
style CC fill:#E87E2F,color:#fff
style O1 fill:#7BC47F
style O2 fill:#7BC47F
style O3 fill:#7BC47F
style O1 fill:#7BC47F,color:#333
style O2 fill:#7BC47F,color:#333
style O3 fill:#7BC47F,color:#333
style D1 fill:#6DB3F2,color:#fff
style D2 fill:#6DB3F2,color:#fff
style D3 fill:#6DB3F2,color:#fff
style D4 fill:#6DB3F2,color:#fff
style OP1 fill:#F5E6D3
style OP2 fill:#F5E6D3
style OP3 fill:#F5E6D3
style L1 fill:#B8B8B8
style L2 fill:#B8B8B8
style OP1 fill:#F5E6D3,color:#333
style OP2 fill:#F5E6D3,color:#333
style OP3 fill:#F5E6D3,color:#333
style L1 fill:#B8B8B8,color:#333
style L2 fill:#B8B8B8,color:#333
```
<details>
@ -105,16 +105,16 @@ flowchart LR
CC1 --> P1 --> P2 --> S1 --> S2 --> EXT
EXT --> S2 --> S3 --> P3 --> CC3
style CC1 fill:#F5E6D3
style CC2 fill:#B8B8B8
style CC3 fill:#7BC47F
style CC1 fill:#F5E6D3,color:#333
style CC2 fill:#B8B8B8,color:#333
style CC3 fill:#7BC47F,color:#333
style P1 fill:#6DB3F2,color:#fff
style P2 fill:#6DB3F2,color:#fff
style P3 fill:#6DB3F2,color:#fff
style S1 fill:#E87E2F,color:#fff
style S2 fill:#E87E2F,color:#fff
style S3 fill:#E87E2F,color:#fff
style EXT fill:#B8B8B8
style EXT fill:#B8B8B8,color:#333
```
<details>
@ -200,11 +200,11 @@ flowchart TD
style A fill:#E87E2F,color:#fff
style B fill:#6DB3F2,color:#fff
style C fill:#6DB3F2,color:#fff
style D fill:#F5E6D3
style E fill:#B8B8B8
style A1 fill:#B8B8B8
style B1 fill:#B8B8B8
style D1 fill:#B8B8B8
style D fill:#F5E6D3,color:#333
style E fill:#B8B8B8,color:#333
style A1 fill:#B8B8B8,color:#333
style B1 fill:#B8B8B8,color:#333
style D1 fill:#B8B8B8,color:#333
```
<details>

18
guide/diagrams/06-development-workflows.md
View file

@ -40,9 +40,9 @@ flowchart TD
style D fill:#E87E2F,color:#fff
style H fill:#E87E2F,color:#fff
style J fill:#E87E2F,color:#fff
style G fill:#7BC47F
style G fill:#7BC47F,color:#333
style K fill:#6DB3F2,color:#fff
style N fill:#7BC47F
style N fill:#7BC47F,color:#333
```
<details>
@ -95,12 +95,12 @@ flowchart LR
M --> K
L -->|Yes| N([Merge ✓])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#6DB3F2,color:#fff
style D fill:#E87E2F,color:#fff
style I fill:#E87E2F,color:#fff
style L fill:#E87E2F,color:#fff
style N fill:#7BC47F
style N fill:#7BC47F,color:#333
```
<details>
@ -152,13 +152,13 @@ flowchart TD
N -->|No| J
N -->|Yes| O([Task done ✓])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#6DB3F2,color:#fff
style F fill:#E87E2F,color:#fff
style L fill:#E87E2F,color:#fff
style N fill:#E87E2F,color:#fff
style G fill:#F5E6D3
style O fill:#7BC47F
style G fill:#F5E6D3,color:#333
style O fill:#7BC47F,color:#333
```
<details>
@ -219,11 +219,11 @@ flowchart TD
O -->|No| P(Different\napproach needed)
P --> F
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style D fill:#E87E2F,color:#fff
style G fill:#E87E2F,color:#fff
style O fill:#E87E2F,color:#fff
style E fill:#7BC47F
style E fill:#7BC47F,color:#333
style L fill:#6DB3F2,color:#fff
style P fill:#E85D5D,color:#fff
```

46
guide/diagrams/07-multi-agent-patterns.md
View file

@ -40,16 +40,16 @@ flowchart TD
style OW1 fill:#6DB3F2,color:#fff
style OW2 fill:#6DB3F2,color:#fff
style OW3 fill:#6DB3F2,color:#fff
style OR fill:#7BC47F
style PA fill:#F5E6D3
style PB fill:#F5E6D3
style PC fill:#F5E6D3
style PD fill:#7BC47F
style OR fill:#7BC47F,color:#333
style PA fill:#F5E6D3,color:#333
style PB fill:#F5E6D3,color:#333
style PC fill:#F5E6D3,color:#333
style PD fill:#7BC47F,color:#333
style RR fill:#E87E2F,color:#fff
style RC fill:#6DB3F2,color:#fff
style RT fill:#6DB3F2,color:#fff
style RD fill:#6DB3F2,color:#fff
style RO fill:#7BC47F
style RO fill:#7BC47F,color:#333
```
<details>
@ -97,13 +97,13 @@ flowchart LR
style CA fill:#6DB3F2,color:#fff
style CB fill:#6DB3F2,color:#fff
style CC fill:#6DB3F2,color:#fff
style CA1 fill:#7BC47F
style CB1 fill:#7BC47F
style CC1 fill:#7BC47F
style MERGE fill:#7BC47F
style WA fill:#F5E6D3
style WB fill:#F5E6D3
style WC fill:#F5E6D3
style CA1 fill:#7BC47F,color:#333
style CB1 fill:#7BC47F,color:#333
style CC1 fill:#7BC47F,color:#333
style MERGE fill:#7BC47F,color:#333
style WA fill:#F5E6D3,color:#333
style WB fill:#F5E6D3,color:#333
style WC fill:#F5E6D3,color:#333
```
<details>
@ -196,14 +196,14 @@ flowchart LR
CI1 & CI2 & CI3 & CIN --> AGG(Aggregate\nresults)
AGG --> REV([Integration review\n~10x faster than sequential])
style BT fill:#F5E6D3
style BT fill:#F5E6D3,color:#333
style DEC fill:#E87E2F,color:#fff
style CI1 fill:#6DB3F2,color:#fff
style CI2 fill:#6DB3F2,color:#fff
style CI3 fill:#6DB3F2,color:#fff
style CIN fill:#6DB3F2,color:#fff
style AGG fill:#B8B8B8
style REV fill:#7BC47F
style AGG fill:#B8B8B8,color:#333
style REV fill:#7BC47F,color:#333
```
<details>
@ -251,18 +251,18 @@ flowchart TD
B2{Need planning\nseparation?} --> L([Dual-instance\nPlanner + Executor])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#E87E2F,color:#fff
style D fill:#E87E2F,color:#fff
style E fill:#E87E2F,color:#fff
style H fill:#E87E2F,color:#fff
style B2 fill:#E87E2F,color:#fff
style C fill:#B8B8B8
style F fill:#7BC47F
style G fill:#7BC47F
style I fill:#7BC47F
style J fill:#7BC47F
style K fill:#7BC47F
style C fill:#B8B8B8,color:#333
style F fill:#7BC47F,color:#333
style G fill:#7BC47F,color:#333
style I fill:#7BC47F,color:#333
style J fill:#7BC47F,color:#333
style K fill:#7BC47F,color:#333
style L fill:#6DB3F2,color:#fff
```

38
guide/diagrams/08-security-and-production.md
View file

@ -42,17 +42,17 @@ flowchart LR
L3 --> BLOCKED([Threat contained])
style THREAT fill:#E85D5D,color:#fff
style P1 fill:#7BC47F
style P2 fill:#7BC47F
style P3 fill:#7BC47F
style P4 fill:#7BC47F
style P1 fill:#7BC47F,color:#333
style P2 fill:#7BC47F,color:#333
style P3 fill:#7BC47F,color:#333
style P4 fill:#7BC47F,color:#333
style D1 fill:#6DB3F2,color:#fff
style D2 fill:#6DB3F2,color:#fff
style D3 fill:#6DB3F2,color:#fff
style R1 fill:#E87E2F,color:#fff
style R2 fill:#E87E2F,color:#fff
style R3 fill:#E87E2F,color:#fff
style BLOCKED fill:#7BC47F
style BLOCKED fill:#7BC47F,color:#333
```
<details>
@ -104,10 +104,10 @@ flowchart TD
NOTE["Rule of thumb:\nIf in doubt → sandbox it\nCost: low. Risk without it: high."] --> A
style C fill:#E85D5D,color:#fff
style F fill:#7BC47F
style G fill:#7BC47F
style H fill:#7BC47F
style K fill:#7BC47F
style F fill:#7BC47F,color:#333
style G fill:#7BC47F,color:#333
style H fill:#7BC47F,color:#333
style K fill:#7BC47F,color:#333
style L fill:#6DB3F2,color:#fff
style M fill:#E87E2F,color:#fff
style B fill:#E87E2F,color:#fff
@ -115,7 +115,7 @@ flowchart TD
style E fill:#E87E2F,color:#fff
style I fill:#E87E2F,color:#fff
style J fill:#E87E2F,color:#fff
style NOTE fill:#F5E6D3
style NOTE fill:#F5E6D3,color:#333
```
<details>
@ -163,11 +163,11 @@ flowchart TD
GB & GC & GD --> GE{All checks\npass?}
GE -->|Yes| GF([Safe to deploy])
GE -->|No| GG([Fix before deploy])
style GA fill:#7BC47F
style GB fill:#7BC47F
style GC fill:#7BC47F
style GD fill:#7BC47F
style GF fill:#7BC47F
style GA fill:#7BC47F,color:#333
style GB fill:#7BC47F,color:#333
style GC fill:#7BC47F,color:#333
style GD fill:#7BC47F,color:#333
style GF fill:#7BC47F,color:#333
style GE fill:#E87E2F,color:#fff
style GG fill:#6DB3F2,color:#fff
end
@ -215,17 +215,17 @@ flowchart LR
FAIL --> FIX([Developer fixes\nre-trigger CI])
FIX --> CC
style PR fill:#F5E6D3
style GH fill:#B8B8B8
style PR fill:#F5E6D3,color:#333
style GH fill:#B8B8B8,color:#333
style CC fill:#E87E2F,color:#fff
style T1 fill:#6DB3F2,color:#fff
style T2 fill:#6DB3F2,color:#fff
style T3 fill:#6DB3F2,color:#fff
style T4 fill:#6DB3F2,color:#fff
style AGG fill:#E87E2F,color:#fff
style OK fill:#7BC47F
style OK fill:#7BC47F,color:#333
style FAIL fill:#E85D5D,color:#fff
style FIX fill:#F5E6D3
style FIX fill:#F5E6D3,color:#333
```
<details>

46
guide/diagrams/09-cost-and-optimization.md
View file

@ -31,16 +31,16 @@ flowchart TD
G -->|No: just large| J["Large but clear tasks:\nbig refactors,\ndoc generation"]
J --> F
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#E87E2F,color:#fff
style G fill:#E87E2F,color:#fff
style D fill:#7BC47F
style D fill:#7BC47F,color:#333
style F fill:#6DB3F2,color:#fff
style I fill:#E87E2F,color:#fff
style C fill:#B8B8B8
style E fill:#B8B8B8
style H fill:#B8B8B8
style J fill:#B8B8B8
style C fill:#B8B8B8,color:#333
style E fill:#B8B8B8,color:#333
style H fill:#B8B8B8,color:#333
style J fill:#B8B8B8,color:#333
```
<details>
@ -89,18 +89,18 @@ flowchart TD
J -->|No| L([Baseline cost\nacceptable])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#E87E2F,color:#fff
style D fill:#E87E2F,color:#fff
style F fill:#E87E2F,color:#fff
style H fill:#E87E2F,color:#fff
style J fill:#E87E2F,color:#fff
style Z fill:#7BC47F
style Z2 fill:#7BC47F
style Z3 fill:#7BC47F
style Z4 fill:#7BC47F
style Z5 fill:#7BC47F
style L fill:#B8B8B8
style Z fill:#7BC47F,color:#333
style Z2 fill:#7BC47F,color:#333
style Z3 fill:#7BC47F,color:#333
style Z4 fill:#7BC47F,color:#333
style Z5 fill:#7BC47F,color:#333
style L fill:#B8B8B8,color:#333
```
<details>
@ -160,11 +160,11 @@ flowchart LR
style F3 fill:#E85D5D,color:#fff
style F4 fill:#E85D5D,color:#fff
style P4 fill:#E87E2F,color:#fff
style P1 fill:#7BC47F
style M1 fill:#7BC47F
style M2 fill:#7BC47F
style M3 fill:#7BC47F
style M4 fill:#7BC47F
style P1 fill:#7BC47F,color:#333
style M1 fill:#7BC47F,color:#333
style M2 fill:#7BC47F,color:#333
style M3 fill:#7BC47F,color:#333
style M4 fill:#7BC47F,color:#333
style T1 fill:#6DB3F2,color:#fff
style T2 fill:#6DB3F2,color:#fff
style T3 fill:#6DB3F2,color:#fff
@ -231,11 +231,11 @@ flowchart LR
MODEL --> RESULT([Optimized:\n10-20% of baseline\nfor typical usage])
style BASE fill:#E85D5D,color:#fff
style R3 fill:#7BC47F
style C3 fill:#7BC47F
style CM3 fill:#7BC47F
style MO3 fill:#7BC47F
style RESULT fill:#7BC47F
style R3 fill:#7BC47F,color:#333
style C3 fill:#7BC47F,color:#333
style CM3 fill:#7BC47F,color:#333
style MO3 fill:#7BC47F,color:#333
style RESULT fill:#7BC47F,color:#333
```
<details>

20
guide/diagrams/10-adoption-and-learning.md
View file

@ -37,14 +37,14 @@ flowchart TD
E3 --> E4(Gradual rollout\nwith guardrails)
E4 --> E5([Team adoption ✓])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#E87E2F,color:#fff
style C fill:#6DB3F2,color:#fff
style D fill:#6DB3F2,color:#fff
style E fill:#6DB3F2,color:#fff
style C4 fill:#7BC47F
style D4 fill:#7BC47F
style E5 fill:#7BC47F
style C4 fill:#7BC47F,color:#333
style D4 fill:#7BC47F,color:#333
style E5 fill:#7BC47F,color:#333
```
<details>
@ -90,9 +90,9 @@ flowchart LR
style U fill:#6DB3F2,color:#fff
style V fill:#E87E2F,color:#fff
style A fill:#E87E2F,color:#fff
style L fill:#7BC47F
style L fill:#7BC47F,color:#333
style NEXT fill:#E87E2F,color:#fff
style DONE fill:#7BC47F
style DONE fill:#7BC47F,color:#333
style TRAP fill:#E85D5D,color:#fff
```
@ -142,19 +142,19 @@ flowchart TD
M -->|Yes| I
M -->|No| N([Pair with domain expert\nor verify by testing])
style A fill:#F5E6D3
style A fill:#F5E6D3,color:#333
style B fill:#E87E2F,color:#fff
style C fill:#E87E2F,color:#fff
style F fill:#E87E2F,color:#fff
style H fill:#E87E2F,color:#fff
style K fill:#E87E2F,color:#fff
style M fill:#E87E2F,color:#fff
style D fill:#7BC47F
style I fill:#7BC47F
style D fill:#7BC47F,color:#333
style I fill:#7BC47F,color:#333
style E fill:#E85D5D,color:#fff
style L fill:#E85D5D,color:#fff
style N fill:#6DB3F2,color:#fff
style J fill:#F5E6D3
style J fill:#F5E6D3,color:#333
```
<details>