interesting concepts

README.md

marp	theme
false	gradient

意外に頻繁に経験した色々

---

Miller's law

7±2

---

Miller's law

1. 人間の短期記憶は約7つの情報項目を記憶できる。
2. 大部分の人々は一度に約5〜9の情報項目を記憶できる。
3. 一度に処理できる情報量には限界があり、超過すると情報を失う可能性がある。
4. 注意力や集中力とも関連があり、一度に処理できる情報量を超えると注意が分散される。

➡️ 限界を超えないように作業を分けて進む。

---

Zeigarnic effect

終わっていないから

---

Zeigarnic effect

1. 進行中又は失敗した事が記憶に残っている事。
2. レストランのステップがメモもせずに長い注文を受付ったが、料理が出た後は全く覚えていなかったことで研究した。

➡️ 終わってから新しい作業をしないとMiller's lawで作業記憶が7 - ⍺になる。

---

Dunning–Kruger effect

自慢

---

Dunning–Kruger effect

ある専門的な分野で専門性が足りない人が自分の専門性を高く評価する事。

---

Dunning–Kruger effect

• 頭が良い悪いではない。
• 専門分野で働く人の大体は自分が平均以上だた思う。
• 例）スポーツ番組みて起こりながら指摘するスポーツファン（？）
• 高い専門性の知識又は詳しい人の行動を知らないためのよう。
• なぜか非専門家は影響受けている人を信頼しやすい。

---

Context Switching

高負荷の代表

---

Context Switching

1. タスクの切り替え。
2. Processorの観点では
   1. 関数の切り替え。
   2. threadの切り替え。
   3. suspend fun(coroutine)を呼ぶ = 1 + 2
3. 開発者観点では
   1. Callback
   2. if - else
   3. { }

---

Context Switching - Callback

@Compose
fun SomeComponent(onClick:() -> Unit) { /* ... */ }

/** BAD */
Column {
    SomeComponent {
        viewModel.handler()
    }
}

/** GOOD */
val onClick = { viewModel.handler() }
Column {
    SomeComponent(onClick = onClick)
}

---

Context Switching - Condition

fun bad(condition:Boolean) {
    if(condition) {
        ...
    } else {
        ...
    }
    ...
    if(!condition){
        ...
    }
}

fun good(condition:Boolean) {
    if(condition) {
        trueCase()
    } else {
        falseCase()
    }
}

---

Partial Optimization

大きに問題を小さく分けて処理する事。

---

Partial Optimizationの罠

部分的に良い選択をしたため、結果が悪くなる事。

---

Partial Optimizationの罠

---

Partial Optimizationの罠

---

Partial Optimizationの罠

---

Partial Optimizationの罠

---

Partial Optimizationの罠

よく出るケース：

1. ファイルの数を減らすため一つのファイルに複数のタイプを定義した。 ➡️ IDEのProjectビューではファイルがどこにあるか分からなくなった。
2. 画面単位でAPIを最適化した ➡️ 色んな画面を実装するためほぼ同じAPIが複数出て、通信とデーターの管理が複雑になった。
3. 使う属性が少ないから専用タイプを定義せずString、Intなどで定義した。 ➡️ 色んな関連コードでバリデーションコードとUTケースが増えた。

---

RDD

---

RDD

Resume Driven Development

仕事に必要な技術ではなく、履歴書に入れたい技術を使う仕組み。

• Agileがトレンドになった頃に使い始めたよう。
• トレンドを学ぶための採用する事ではない。
• 自分も気づかずやることもある。

---

参考

1. Miller's law
   • https://en.wikipedia.org/wiki/George_Armitage_Miller
   • https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
2. Zeigarnic effect
   • https://en.wikipedia.org/wiki/Zeigarnik_effect
3. Dunning–Kruger effect
   • https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect
4. RDD
   • 2004年 : https://www.industrialxp.org/continuousLearning.html

README.pdf

academic.css

/* @theme academic */
/* Author: kaisugi https://github.com/kaisugi/ */
/* MIT license https://github.com/kaisugi/marp-theme-academic/blob/main/LICENSE */

@import 'gaia';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

:root {
  --color-background: #fff;
  --color-foreground: #333;
  --color-highlight: #800000;
}

section {
  background-image: none;
  font-family: 'Noto Sans JP', sans-serif;
  padding-top: 90px;
  padding-left: 40px;
  padding-right: 40px;
}

/* https://github.com/marp-team/marpit/issues/271 */
section::after {
  font-weight: 700;
  content: attr(data-marpit-pagination) '/' attr(data-marpit-pagination-total);
}

ul ul {
  font-size: 0.9em;
}

section.lead h1 {
  color: #800000;
  text-align: left;
}
section.lead h1 strong {
  -webkit-text-stroke: 1px #800000;
}
section.lead h2 {
  color: #800000;
  text-align: left;
}
section.lead h2 strong {
  -webkit-text-stroke: 1px #800000;
}
section.lead h3 {
  color: #800000;
  text-align: left;
}
section.lead h3 strong {
  -webkit-text-stroke: 1px #800000;
}
section.lead h4 {
  color: #800000;
  text-align: left;
}
section.lead h4 strong {
  -webkit-text-stroke: 1px #800000;
}
section.lead h5 {
  color: #800000;
  text-align: left;
}
section.lead h5 strong {
  -webkit-text-stroke: 1px #800000;
}
section.lead p {
  text-align: right;
}

header {
  background-color: #800000;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
}

blockquote {
  max-width: 90%;
  border-top: 0.1em dashed #555;
  font-size: 60%;
  position: absolute;
  bottom: 20px;
}
blockquote::before {
  content: "";
}
blockquote::after {
  content: "";
}

img[alt~="center"] {
  display: block;
  margin: 0 auto;
}

code {
  font-family: 'Source Code Pro', monospace;
}

beam.css

/* @theme beam */
/* Author: rnd195 https://github.com/rnd195/ */
/* beam license - GNU GPLv3 https://github.com/rnd195/my-marp-themes/blob/live/LICENSE_beam */
/* License of beamer which inspired this theme - GNU GPLv2 https://github.com/rnd195/my-marp-themes/blob/live/LICENSE_GPLv2 */

@import "default";

:root {
  font-family: "CMU Sans Serif", "Segoe UI", Helvetica, sans-serif;
  --main: #1f38c5;
  --secondary: #141414;
}

section {
  background-color: #ffffff;
  /* bottom two-coloured bar in base64 svg */
  background-image:
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjUwbW0iIGhlaWdodD0iNS4zNTQ2bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI1MCA1LjM1NDYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMC4zNDcgLTkxLjAyOCkiPgo8cmVjdCB4PSIyMC4zNDciIHk9IjkxLjAyOCIgd2lkdGg9IjEyNSIgaGVpZ2h0PSI1LjM1NDYiIGZpbGw9IiMxNDE0MTQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLXdpZHRoPSIwIi8+CjxwYXRoIGQ9Im0xNDUuMzUgOTMuNzA1di0yLjY3NzNoMTI1djUuMzU0NmgtMTI1eiIgZmlsbD0iIzFmMzhjNSIgc3Ryb2tlLXdpZHRoPSIwIi8+CjwvZz4KPC9zdmc+);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 150% 1em;
  padding: 2em;
}

header {
  font-size: 0.6em;
  /* this text-align is important */
  text-align: right;
  /* I don't like this absolute positioning, but it works */
  position: absolute;
  top: 96.2%;
  width: 100%;
  right: 0;
  left: -51%;
  color: white;
}

footer {
  font-size: 0.6em;
  position: absolute;
  /* this text-align is important */
  text-align: left;
  top: 96.2%;
  width: 100%;
  right: 0;
  left: 50.8%;
  color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #141414;
}

/* only apply to the first occurrence of h1 */
h1:nth-of-type(1) {
  font-family: "CMU Bright", "Segoe UI Semibold";
  color: #ffffff;
  background-color: var(--main);
  border-top: 0.3em solid var(--main);
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 1.5em;
  text-indent: 0.5em;
}

code {
  background-color: rgba(100, 100, 100, 0.2);
}

mark {
  background-color: #f5db7e;
}

/* formatting page numbers  */
section::after {
  font-size: 0.6em;
  /* https://github.com/yhatt/marp/issues/263 */
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
  position: absolute;
  text-align: right;
  top: 96.2%;
  width: 100%;
  right: 0;
  left: -0.5em;
  color: white;
}

/* inline math was too large wrt text */
.katex {
  font: normal 1.05em KaTeX_Main, "Times New Roman", serif
}

/* the "center" keyword centers the image - may break, careful */
/* https://github.com/marp-team/marpit/issues/141#issuecomment-473204518 */
img[alt~="center"] {
  display: block;
  margin: 0 auto;
}

/* || SECTION CLASS: title */
/* title page - only to be used as for a single slide */
/* <!-- _class: title --> */
section.title>h1 {
  font-family: "CMU Bright", "Segoe UI Semibold";
  color: #ffffff;
  background-color: var(--main);
  border-radius: 25px;
  text-align: center;
  top: 25%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  padding-bottom: 0.2em;
  height: auto;
}

/* remake this to be positioned with respect to h1 */
section.title>p {
  position: relative;
  text-align: center;
  top: 35px;
}

/* || SECTION CLASS: tinytext */
/* new class that makes p, ul, and blockquote text smaller */
/* might be useful for the References slide, use <!-- _class: tinytext --> */
section.tinytext>p,
section.tinytext>ul,
section.tinytext>blockquote {
  font-size: 0.65em;
}

border.css

/* @theme border */
/* Author: rnd195 https://github.com/rnd195/ */
/* MIT license https://github.com/rnd195/my-marp-themes/blob/live/LICENSE */

@import "default";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  font-family: Inter, Helvetica, Arial;
  --border-color: #303030;
  --text-color: #0a0a0a;
  --bg-color-alt: #dadada;
  --mark-background: #ffef92;
}

section {
  background-image: linear-gradient(to bottom right, #f7f7f7 0%, #d3d3d3 100%);
  border: 1.3em solid var(--border-color);
  outline: 1em solid #ffffff;
  outline-offset: -0.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
}

code {
  background-color: rgba(100, 100, 100, 0.2);
}

/* https://github.com/yhatt/marp/issues/263 */
section::after {
  font-size: 0.75em;
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
}

/* the "center" keyword centers the image - may break, careful */
/* https://github.com/marp-team/marpit/issues/141#issuecomment-473204518 */
img[alt~="center"] {
  display: block;
  margin: 0 auto;
}

blockquote {
  background: var(--bg-color-alt);
  border-left: 10px solid var(--border-color);
  margin: 0.5em;
  padding: 0.5em;
}

/* inspired by the Fluent Typora theme github.com/li3zhen1/Fluent-Typora */
mark {
  background-color: var(--mark-background);
  padding: 0 2px 2px;
  border-radius: 4px;
  margin: 0 2px;
}

/* || SECTION CLASS: tinytext */
/* new class that makes p, ul, and blockquote text smaller */
/* might be useful for the References slide, use <!-- _class: tinytext --> */
section.tinytext>p,
section.tinytext>ul,
section.tinytext>blockquote {
  font-size: 0.65em;
}

Dunning–Kruger effect.png

gradient.css

/* @theme gradient */
/* Author: rnd195 https://github.com/rnd195/ */
/* MIT license https://github.com/rnd195/my-marp-themes/blob/live/LICENSE */

@import "default";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  font-family: Inter, Helvetica, Arial;
}

section {
  background-color: #ffffff;
  background-image: linear-gradient(to top right, #e1c2e1 5%, #b9d5d9 95%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #842174;
}

a {
  color: #9d30a6;
}

code {
  background-color: #ffffffad;
}

mark {
  background-color: #eaa2ee;
  padding: 0 2px 2px;
}

pre {
  background-color: #ffffffad;
}

/* https://github.com/yhatt/marp/issues/263 */
section::after {
  font-size: 0.75em;
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
}

/* the "center" keyword centers the image - may break, careful */
/* https://github.com/marp-team/marpit/issues/141#issuecomment-473204518 */
img[alt~="center"] {
  display: block;
  margin: 0 auto;
}

/* || SECTION CLASS: blue */
section.blue {
  background-color: #ffffff;
  background-image: linear-gradient(to bottom right, #cadaf7 5%, #87a7e4 95%);
}

section.blue>h1,
section.blue>h2,
section.blue>h3,
section.blue>h4,
section.blue>h5,
section.blue>h6 {
  color: #214484;
}

section.blue>a {
  color: #303ca6;
}

section.blue::after,
section.blue>footer,
section.blue>header {
  color: #303ca6;
}

/* || SECTION CLASS: tinytext */
/* new class that makes p, ul, and blockquote text smaller */
/* might be useful for the References slide, use <!-- _class: tinytext --> */
section.tinytext>p,
section.tinytext>ul,
section.tinytext>blockquote {
  font-size: 0.65em;
}

graph_paper.css

/* @theme graph_paper */
/* Author: rnd195 https://github.com/rnd195/ */
/* MIT license https://github.com/rnd195/my-marp-themes/blob/live/LICENSE */

@import "default";
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');

:root {
  font-family: "Work Sans Regular", Arial;
  --main-color: #040014;
  --text-color: #121114;
  --bg-color-alt: #dadada;
  --mark-background: #98d6ff;
}

section {
  background-color: #e3e3f1;
  background-size: 20px 20px;
  background-image: linear-gradient(#3f32af18 1px, transparent 1px), linear-gradient(to right, #ccc89536 1px, #d8d8e62d 1px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
}

header {
  font-size: 0.7em;
  color: var(--text-color);
  border-bottom: 1px solid #040014;
}

footer {
  font-size: 0.7em;
  color: var(--text-color);
  border-top: 1px solid #040014;
}

code {
  background-color: #ffffff;
  font-size: 0.9em
}

pre {
  background-color: #ffffff;
}

/* https://github.com/yhatt/marp/issues/263 */
section::after {
  font-size: 0.75em;
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
  color: var(--text-color);
}

/* the "center" keyword centers the image - may break, careful */
/* https://github.com/marp-team/marpit/issues/141#issuecomment-473204518 */
img[alt~="center"] {
  display: block;
  margin: 0 auto;
}

blockquote {
  background: #ffffff;
  border-left: 10px solid var(--main-color);
  margin: 0.5em;
  padding: 0.5em;
}

mark {
  background-color: var(--mark-background);
  padding: 0 2px 2px;
}

table {
  display: block;
  margin: 0 auto;
}

th {
  background-color: #8ea2af;
  color: white;
}

/* || SECTION CLASS: tinytext */
/* new class that makes p, ul, and blockquote text smaller */
/* might be useful for the References slide, use <!-- _class: tinytext --> */
section.tinytext>p,
section.tinytext>ul,
section.tinytext>blockquote {
  font-size: 0.65em;
}

partial optimization 1.png

partial optimization 2.png

partial optimization 3.png

partial optimization 4.png

rose-pine-dawn.css

/* @theme rose-pine-dawn */
/*
Rosé Pine theme create by RAINBOWFLESH
> www.rosepinetheme.com
MIT License https://github.com/rainbowflesh/Rose-Pine-For-Marp/blob/master/license

palette in :root
*/

@import "default";
@import "schema";
@import "structure";

:root {
    --base: #faf4ed;
    --surface: #fffaf3;
    --overlay: #f2e9e1;
    --muted: #9893a5;
    --subtle: #797593;
    --text: #575279;
    --love: #b4637a;
    --gold: #ea9d34;
    --rose: #d7827e;
    --pine: #286983;
    --foam: #56949f;
    --iris: #907aa9;
    --highlight-low: #f4ede8;
    --highlight-muted: #dfdad9;
    --highlight-high: #cecacd;

    font-family: Pier Sans, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
        "Noto Color Emoji";
    font-weight: initial;

    background-color: var(--base);
}
/* Common style */
h1 {
    color: var(--rose);
    padding-bottom: 2mm;
    margin-bottom: 12mm;
}
h2 {
    color: var(--rose);
}
h3 {
    color: var(--rose);
}
h4 {
    color: var(--rose);
}
h5 {
    color: var(--rose);
}
h6 {
    color: var(--rose);
}
a {
    color: var(--iris);
}
p {
    font-size: 20pt;
    font-weight: 600;
    color: var(--text);
}
code {
    color: var(--text);
    background-color: var(--highlight-muted);
}
text {
    color: var(--text);
}
ul {
    color: var(--subtle);
}
li {
    color: var(--subtle);
}
img {
    background-color: var(--highlight-low);
}
strong {
    color: var(--text);
    font-weight: inherit;
    font-weight: 800;
}
mjx-container {
    color: var(--text);
}
marp-pre {
    background-color: var(--overlay);
    border-color: var(--highlight-high);
}

/* Code blok */
.hljs-comment {
    color: var(--muted);
}
.hljs-attr {
    color: var(--foam);
}
.hljs-punctuation {
    color: var(--subtle);
}
.hljs-string {
    color: var(--gold);
}
.hljs-title {
    color: var(--foam);
}
.hljs-keyword {
    color: var(--pine);
}
.hljs-variable {
    color: var(--text);
}
.hljs-literal {
    color: var(--rose);
}
.hljs-type {
    color: var(--love);
}
.hljs-number {
    color: var(--gold);
}
.hljs-built_in {
    color: var(--love);
}
.hljs-params {
    color: var(--iris);
}
.hljs-symbol {
    color: var(--foam);
}
.hljs-meta {
    color: var(--subtle);
}

rose-pine-moon.css

/* @theme rose-pine-moon */
/*
Rosé Pine theme create by RAINBOWFLESH
> www.rosepinetheme.com
MIT License https://github.com/rainbowflesh/Rose-Pine-For-Marp/blob/master/license

palette in :root
*/

@import "default";
@import "schema";
@import "structure";

:root {
    --base: #232136;
    --surface: #2a273f;
    --overlay: #393552;
    --muted: #6e6a86;
    --subtle: #908caa;
    --text: #e0def4;
    --love: #eb6f92;
    --gold: #f6c177;
    --rose: #ea9a97;
    --pine: #3e8fb0;
    --foam: #9ccfd8;
    --iris: #c4a7e7;
    --highlight-low: #2a283e;
    --highlight-muted: #44415a;
    --highlight-high: #56526e;

    font-family: Pier Sans, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
        "Noto Color Emoji";
    font-weight: initial;

    background-color: var(--base);
}
/* Common style */
h1 {
    color: var(--rose);
    padding-bottom: 2mm;
    margin-bottom: 12mm;
}
h2 {
    color: var(--rose);
}
h3 {
    color: var(--rose);
}
h4 {
    color: var(--rose);
}
h5 {
    color: var(--rose);
}
h6 {
    color: var(--rose);
}
a {
    color: var(--iris);
}
p {
    font-size: 20pt;
    font-weight: 600;
    color: var(--text);
}
code {
    color: var(--text);
    background-color: var(--highlight-muted);
}
text {
    color: var(--text);
}
ul {
    color: var(--subtle);
}
li {
    color: var(--subtle);
}
img {
    background-color: var(--highlight-low);
}
strong {
    color: var(--text);
    font-weight: inherit;
    font-weight: 800;
}
mjx-container {
    color: var(--text);
}
marp-pre {
    background-color: var(--overlay);
    border-color: var(--highlight-high);
}

/* Code blok */
.hljs-comment {
    color: var(--muted);
}
.hljs-attr {
    color: var(--foam);
}
.hljs-punctuation {
    color: var(--subtle);
}
.hljs-string {
    color: var(--gold);
}
.hljs-title {
    color: var(--foam);
}
.hljs-keyword {
    color: var(--pine);
}
.hljs-variable {
    color: var(--text);
}
.hljs-literal {
    color: var(--rose);
}
.hljs-type {
    color: var(--love);
}
.hljs-number {
    color: var(--gold);
}
.hljs-built_in {
    color: var(--love);
}
.hljs-params {
    color: var(--iris);
}
.hljs-symbol {
    color: var(--foam);
}
.hljs-meta {
    color: var(--subtle);
}

rose-pine.css

/* @theme rose-pine */
/*
Rosé Pine theme create by RAINBOWFLESH
> www.rosepinetheme.com
MIT License https://github.com/rainbowflesh/Rose-Pine-For-Marp/blob/master/license

palette in :root
*/

@import "default";
@import "schema";
@import "structure";

:root {
    --base: #191724;
    --surface: #1f1d2e;
    --overlay: #26233a;
    --muted: #6e6a86;
    --subtle: #908caa;
    --text: #e0def4;
    --love: #eb6f92;
    --gold: #f6c177;
    --rose: #ebbcba;
    --pine: #31748f;
    --foam: #9ccfd8;
    --iris: #c4a7e7;
    --highlight-low: #21202e;
    --highlight-muted: #403d52;
    --highlight-high: #524f67;

    font-family: Pier Sans, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
        "Noto Color Emoji";
    font-weight: initial;

    background-color: var(--base);
}
/* Common style */
h1 {
    color: var(--rose);
    padding-bottom: 2mm;
    margin-bottom: 12mm;
}
h2 {
    color: var(--rose);
}
h3 {
    color: var(--rose);
}
h4 {
    color: var(--rose);
}
h5 {
    color: var(--rose);
}
h6 {
    color: var(--rose);
}
a {
    color: var(--iris);
}
p {
    font-size: 20pt;
    font-weight: 600;
    color: var(--text);
}
code {
    color: var(--text);
    background-color: var(--highlight-muted);
}
text {
    color: var(--text);
}
ul {
    color: var(--subtle);
}
li {
    color: var(--subtle);
}
img {
    background-color: var(--highlight-low);
}
strong {
    color: var(--text);
    font-weight: inherit;
    font-weight: 800;
}
mjx-container {
    color: var(--text);
}
marp-pre {
    background-color: var(--overlay);
    border-color: var(--highlight-high);
}

/* Code blok */
.hljs-comment {
    color: var(--muted);
}
.hljs-attr {
    color: var(--foam);
}
.hljs-punctuation {
    color: var(--subtle);
}
.hljs-string {
    color: var(--gold);
}
.hljs-title {
    color: var(--foam);
}
.hljs-keyword {
    color: var(--pine);
}
.hljs-variable {
    color: var(--text);
}
.hljs-literal {
    color: var(--rose);
}
.hljs-type {
    color: var(--love);
}
.hljs-number {
    color: var(--gold);
}
.hljs-built_in {
    color: var(--love);
}
.hljs-params {
    color: var(--iris);
}
.hljs-symbol {
    color: var(--foam);
}
.hljs-meta {
    color: var(--subtle);
}