@charset "UTF-8";
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: local("Roboto Mono Regular"), local("Roboto-Mono-Regular"), url(../fonts/RobotoMonoRegular.woff) format("woff"); font-display: swap; }

@font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 400; src: local("Roboto Mono Italic"), local("Roboto-Mono-Italic"), url(../fonts/RobotoMonoItalic.woff) format("woff"); font-display: swap; }

@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; src: local("Roboto Mono Bold"), local("Roboto-Mono-Bold"), url(../fonts/RobotoMonoBold.woff) format("woff"); font-display: swap; }

@media (prefers-color-scheme: light) { html { --background: #fff; --text: #222; --blockquote: #777; --faded: #aaa; --link: color(display-p3 0.85 0 0); --button: #000; } }

@media (prefers-color-scheme: dark) { html:not(.light-mode) { --background: #000; --text: #ddd; --blockquote: #999; --faded: #555; --link: color(display-p3 0.85 0 0); --button: #fff; } html:not(.light-mode) .side--mask--1 { filter: invert(1) !important; } html:not(.light-mode) .ux-at img { filter: invert(1) !important; } html:not(.light-mode) .ux-image[src*="ux01.avif"] { content: url("/img/ux01-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux02.avif"] { content: url("/img/ux02-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux03.avif"] { content: url("/img/ux03-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux04.avif"] { content: url("/img/ux04-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux05.avif"] { content: url("/img/ux05-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux06.avif"] { content: url("/img/ux06-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux07.avif"] { content: url("/img/ux07-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux08.avif"] { content: url("/img/ux08-dark.avif"); } html:not(.light-mode) .ux-image[src*="ux09.avif"] { content: url("/img/ux09-dark.avif"); } }

html.dark-mode { --background: #000; --text: #ddd; --blockquote: #999; --faded: #555; --link: color(display-p3 0.85 0 0); --button: #fff; }

html.dark-mode .side--mask--1 { filter: invert(1) !important; }

html.dark-mode .ux-at img { filter: invert(1) !important; }

html.dark-mode .ux-image[src*="ux01.avif"] { content: url("/img/ux01-dark.avif"); }

html.dark-mode .ux-image[src*="ux02.avif"] { content: url("/img/ux02-dark.avif"); }

html.dark-mode .ux-image[src*="ux03.avif"] { content: url("/img/ux03-dark.avif"); }

html.dark-mode .ux-image[src*="ux04.avif"] { content: url("/img/ux04-dark.avif"); }

html.dark-mode .ux-image[src*="ux05.avif"] { content: url("/img/ux05-dark.avif"); }

html.dark-mode .ux-image[src*="ux06.avif"] { content: url("/img/ux06-dark.avif"); }

html.dark-mode .ux-image[src*="ux07.avif"] { content: url("/img/ux07-dark.avif"); }

html.dark-mode .ux-image[src*="ux08.avif"] { content: url("/img/ux08-dark.avif"); }

html.dark-mode .ux-image[src*="ux09.avif"] { content: url("/img/ux09-dark.avif"); }

html.dark-mode #theme-toggle .sun-icon { display: none; }

html.dark-mode #theme-toggle .moon-icon { display: block; }

@media (prefers-color-scheme: dark) { html:not(.light-mode) #theme-toggle .sun-icon { display: none; } html:not(.light-mode) #theme-toggle .moon-icon { display: block; } }

.dark-mode-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 1000; }

#theme-toggle { background: var(--background); border: 2px solid var(--text); border-radius: 50%; width: 3rem; height: 3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

#theme-toggle:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

#theme-toggle .sun-icon, #theme-toggle .moon-icon { transition: opacity 0.3s ease; }

#theme-toggle .moon-icon { display: none; }

html { color: var(--text); background: var(--background); }

* { margin: 0; padding: 0; border: none; }

a { color: var(--text); }

sur { font-size: 0.6180339887rem; font-weight: bold; position: relative; top: -.5rem; margin-left: .1rem; }

sup { margin-right: 2px; }

figure { position: relative; text-align: center; }

figure img { margin-bottom: 0; }

blockquote { font-style: italic; position: relative; padding: 0.5rem 0rem 0.5rem 1rem; color: var(--blockquote); }

blockquote::before { content: "”"; font-family: sans-serif; font-size: 4rem; position: absolute; top: 1rem; left: 0rem; opacity: 0.125; z-index: -1; font-style: normal; }

p, ol, ul, h2, h3, h4, img, video, pre, code, figure, .post__time, .category { margin-bottom: 1.6180339887rem; }

html, body, code, h2, h3, h4, h5, pre, code, .aboutme { font-family: "Roboto Mono", monospace, sans-serif; font-size: 16px; line-height: 1.6180339887em; }

.page { padding: 1rem; display: block; max-width: 31.3rem; position: relative; z-index: 1; margin: 0 auto; overflow-x: hidden; }

@media only screen and (min-width: 575px) { .page { padding: 2rem 3rem; } }

.substack-post-embed, .twitter-tweet-rendered { margin: 0 !important; }

.home { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 575px) { .home { gap: 2rem; } }

.button { background: var(--button); color: var(--background); padding: 0.7rem 1.5rem 0.8rem; border-radius: 2rem; display: inline-block; margin: 2rem 0 10rem; }

.aboutme { font-weight: normal; font-weight: bold; }

.ux-at { display: flex; gap: 2rem; align-items: flex-end; }

@media only screen and (min-width: 575px) { .ux-at { gap: 3.8rem; } }

.ux-at a { display: flex; flex-direction: column-reverse; align-items: center; gap: 1rem; color: var(--faded); text-decoration: none; }

.ux-at a:not(:first-child) img { opacity: 0.33; }

.ux-at a + a { opacity: 1; }

.ux-at a + a + a { opacity: 0.6; }

.ux-at a + a + a + a { opacity: 0.5; }

.ux-at a + a + a + a + a { opacity: 0.4; }

.ux-at img { height: 3rem; display: inline-block; margin: 0; }

.ux-at span { font-size: 1.5rem; color: var(--faded); position: relative; top: -0.125rem; }

.postlink { margin-bottom: 1rem; display: block; }

.postlink:hover .postlink__title__arrow { opacity: 1; }

.postlink:hover .postlink__time { color: var(--text); }

.postlink .material-icons { position: relative; top: 7px; }

.postlink__time, .postlink__title { font-weight: normal; display: inline; }

.sociallinks, .postlink__time, .category__header { color: var(--text); font-weight: normal; }

.sociallinks { line-height: 2rem; font-size: 0.75rem; }

.category__header { opacity: 0.6180339887; }

.postlink__title__arrow { opacity: 0; }

.post__title { font-size: 1.6180339887rem; margin-bottom: 0.8090169944rem; font-weight: bold; }

.post__subtitle { font-size: 0.999945005rem; font-weight: bold; margin-bottom: 4.8541019663rem; }

.arrow-back { font-size: 1.6180339887rem; }

.post__intro { font-style: italic; font-size: .8rem; line-height: 1.25rem; }

.post__time { display: block; margin-bottom: 2.0225424859rem; }

.post__content img, .post__content video { display: block; margin-left: auto; margin-right: auto; text-align: center; }

.side { width: calc((100vw - 44rem - 2*3rem)/2); height: 100vh; position: fixed; }

.side--image { background-position: top center; background-size: cover; animation: show_image 500ms; }

@keyframes show_image { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 100%; } }

.side--mask { background-position: top right; }

.side--mask--1 { background-image: url(../img/mask.svg); background-size: 8px; }

.comments { padding-top: 2.2rem; }

.ux { max-width: 1280px !important; margin: 0 auto; padding: 1rem 0.5rem; }

@media only screen and (min-width: 1280px) { .ux { padding: 2rem; } }

.ux p { margin: 1rem 1.75vw 0; padding: 0; padding-bottom: 0.5rem; }

@media only screen and (min-width: 1280px) { .ux p { margin: 1.6rem 1.6rem 0; padding-bottom: 0.5rem; } }

.ux a { color: color(display-p3 0 0.35 1); text-underline-offset: 0.15em; }

.ux-top { background: url(/img/jan.png) no-repeat bottom right 7vw; background-size: calc(240px + 14vw); margin-bottom: -1.5vw; }

.ux-head { padding-bottom: calc(14rem + 15vw); }

@media only screen and (min-width: 1024px) { .ux-head { width: calc(100% - 440px); max-width: 700px; padding-bottom: 8rem; } }

.ux-image { border-radius: 1rem; width: 100%; margin: 0 auto -0.75vw; }

@media only screen and (min-width: 1280px) { .ux-image { margin-bottom: 0; } }

.signet { font-size: 3rem; margin-bottom: 2rem; }

.home-header, .articles, .home-footer, .home-grid { max-width: 1280px; margin: 0 auto; padding: 2rem 2rem 0; }

@media only screen and (min-width: 768px) { .home-header, .articles, .home-footer, .home-grid { padding: 5rem 5rem 0; } }

.home-header h1 { font-weight: normal; font-size: 1rem; margin-bottom: 1rem; }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

@media only screen and (min-width: 768px) { .home-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4rem; } }

.home-grid__tile h1 { font-size: 1rem; margin-bottom: 1rem; }

.home-grid__tile p { font-size: 0.75rem; line-height: 1rem; }

/** Syntax highlighting styles */
div.highlight { padding: 15px 0; }

.highlight { background: transparent; color: #777; /* Comment */ /* Error */ /* Generic */ /* Keyword */ /* Literal */ /* Name */ /* Operator */ /* Other */ /* Punctuation */ /* Comment.Multiline */ /* Comment.Preproc */ /* Comment.Single */ /* Comment.Special */ /* Generic.Deleted */ /* Generic.Emph */ /* Generic.Error */ /* Generic.Heading */ /* Generic.Inserted */ /* Generic.Output */ /* Generic.Prompt */ /* Generic.Strong */ /* Generic.Subheading */ /* Generic.Traceback */ /* Keyword.Constant */ /* Keyword.Declaration */ /* Keyword.Namespace */ /* Keyword.Pseudo */ /* Keyword.Reserved */ /* Keyword.Type */ /* Literal.Date */ /* Literal.Number */ /* Literal.String */ /* Name.Attribute */ /* Name.Builtin */ /* Name.Class */ /* Name.Constant */ /* Name.Decorator */ /* Name.Entity */ /* Name.Exception */ /* Name.Function */ /* Name.Label */ /* Name.Namespace */ /* Name.Other */ /* Name.Property */ /* Name.Tag */ /* Name.Variable */ /* Operator.Word */ /* Text.Whitespace */ /* Literal.Number.Float */ /* Literal.Number.Hex */ /* Literal.Number.Integer */ /* Literal.Number.Oct */ /* Literal.String.Backtick */ /* Literal.String.Char */ /* Literal.String.Doc */ /* Literal.String.Double */ /* Literal.String.Escape */ /* Literal.String.Heredoc */ /* Literal.String.Interpol */ /* Literal.String.Other */ /* Literal.String.Regex */ /* Literal.String.Single */ /* Literal.String.Symbol */ /* Name.Builtin.Pseudo */ /* Name.Variable.Class */ /* Name.Variable.Global */ /* Name.Variable.Instance */ /* Literal.Number.Integer.Long */ }

.highlight .c { color: #93a1a1; }

.highlight .err { color: #777; }

.highlight .g { color: #777; }

.highlight .k { color: #777; }

.highlight .l { color: #777; }

.highlight .n { color: #bbb; }

.highlight .o { color: #bbb; }

.highlight .x { color: #777; }

.highlight .p { color: #777; }

.highlight .cm { color: #777; }

.highlight .cp { color: #777; font-style: italic; }

.highlight .c1 { color: #777; }

.highlight .cs { color: #777; }

.highlight .gd { color: #777; }

.highlight .ge { color: #777; font-style: italic; }

.highlight .gr { color: #777; }

.highlight .gh { color: #777; }

.highlight .gi { color: #777; }

.highlight .go { color: #777; }

.highlight .gp { color: #777; }

.highlight .gs { color: #777; font-weight: bold; }

.highlight .gu { color: #777; }

.highlight .gt { color: #777; }

.highlight .kc { color: #777; }

.highlight .kd { color: #c60c30; }

.highlight .kn { color: #777; }

.highlight .kp { color: #777; }

.highlight .kr { color: #c60c30; }

.highlight .kt { color: #777; }

.highlight .ld { color: #777; }

.highlight .m { color: #777; }

.highlight .s { color: #777; }

.highlight .na { color: #777; }

.highlight .nb { color: #777; }

.highlight .nc { color: #c60c30; }

.highlight .no { color: #777; }

.highlight .nd { color: #c60c30; }

.highlight .ni { color: #777; }

.highlight .ne { color: #777; }

.highlight .nf { color: #c60c30; }

.highlight .nl { color: #777; }

.highlight .nn { color: #777; }

.highlight .nx { color: #777; }

.highlight .py { color: #777; }

.highlight .nt { color: #c60c30; }

.highlight .nv { color: #c60c30; }

.highlight .ow { color: #777; }

.highlight .w { color: #777; }

.highlight .mf { color: #777; }

.highlight .mh { color: #777; }

.highlight .mi { color: #777; }

.highlight .mo { color: #777; }

.highlight .sb { color: #777; }

.highlight .sc { color: #777; }

.highlight .sd { color: #777; }

.highlight .s2 { color: #777; }

.highlight .se { color: #777; }

.highlight .sh { color: #777; }

.highlight .si { color: #777; }

.highlight .sx { color: #777; }

.highlight .sr { color: #777; }

.highlight .s1 { color: #777; }

.highlight .ss { color: #777; }

.highlight .bp { color: #c60c30; }

.highlight .vc { color: #c60c30; }

.highlight .vg { color: #c60c30; }

.highlight .vi { color: #c60c30; }

.highlight .il { color: #777; }

/*# sourceMappingURL=main.css.map */