diff --git a/ai.html b/ai.html new file mode 100644 index 0000000..bf650a0 --- /dev/null +++ b/ai.html @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + Roland Hollós · AI + + + + + + + + +
+
+ + ✦ AI-Translated Rendering + +

An introduction,
refined by a machine.

+

+
+ +
+ In the midway of this our mortal life,
+ I found me in a gloomy wood, astray
+ Gone from the path direct: and e'en to tell + — Dante Alighieri, Inferno +
+ +
+

+ Every meaningful conversation between strangers begins with a proper + introduction — the small act of opening a door so that curiosity can step + through. Online, where genuine intimacy is rare, that gesture leaves us + exposed. I take the risk regardless: here, you find me openly. +

+
+ +
+

+ Its companion page is written entirely by a human, its + imperfections left in place — embraced rather than hidden. This page is + the counterpart: the whole site is passed through an automated pipeline + that renders the human original into a more polished form using + AI. Flip the switch above — a kind of LLM-mode, in the + spirit of a dark-mode toggle — to move between the two. +

+
+ +
+

+ Everyone seeks connection — Deleuze would agree — for it is among the most + essential parts of being human. Shared origins, common experience, and + mutual interdependence are what make a relationship possible at all. My + central question is this: how does AI support the work of + connecting? Is there a genuine human–AI complementarity? Rather + than answer outright, I would sooner leave the choice with you — and stay + curious about how much our expression, and the bonds between us, stand to + lose or gain as these tools advance. +

+
+ +

Who am I?

+
+

+ I am Roland Hollós, a Hungarian environmental scientist + driven above all by curiosity and a deep urge to create. My work sits at + the crossroads of environmental science, mathematics, and computer + science, and I remain a devoted reader of philosophy, sociology, + psychology, history, and literature. +

+
+ Environmental Science + Mathematics + Computer Science + Philosophy + Sociology + Psychology + History + Literature +
+
+ +
+ + + This page was generated automatically from the human-authored + index.html by an AI translation pipeline. The wording is the + machine's; the meaning remains Roland's. + +
+
+ + + + + + + + + diff --git a/css/ai.css b/css/ai.css new file mode 100644 index 0000000..b568b9b --- /dev/null +++ b/css/ai.css @@ -0,0 +1,328 @@ +/* ========================================================================== + ai.css — styling for the AI-translated version of the site. + Human version lives in human.css and is intentionally left untouched. + ========================================================================== */ + +:root { + --bg: #07080d; + --bg-soft: #0e1018; + --surface: rgba(20, 23, 34, 0.55); + --surface-border: rgba(140, 160, 255, 0.14); + --text: #e7e9f3; + --text-dim: #969cb3; + --accent: #00b4d8; /* echoes the cyan of the human nav */ + --accent-2: #7c5cff; /* AI-purple */ + --accent-3: #ff5cc8; /* magenta highlight */ + --radius: 18px; + --maxw: 68ch; + --font: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; +} + +* { box-sizing: border-box; } + +html { + background: var(--bg); + scroll-behavior: smooth; +} + +body { + margin: 0; + min-height: 100vh; + font-family: var(--font); + color: var(--text); + line-height: 1.7; + background: + radial-gradient(1200px 700px at 15% -10%, rgba(124, 92, 255, 0.18), transparent 60%), + radial-gradient(1100px 650px at 110% 10%, rgba(0, 180, 216, 0.16), transparent 55%), + radial-gradient(900px 600px at 50% 120%, rgba(255, 92, 200, 0.12), transparent 60%), + var(--bg); + overflow-x: hidden; +} + +/* -------------------------------------------------------------------------- + Animated aurora background (pure CSS, no dependencies) + -------------------------------------------------------------------------- */ +.aurora { + position: fixed; + inset: 0; + z-index: -2; + overflow: hidden; + pointer-events: none; + filter: blur(60px) saturate(140%); + opacity: 0.7; +} +.aurora span { + position: absolute; + display: block; + width: 45vw; + height: 45vw; + border-radius: 50%; + mix-blend-mode: screen; + animation: drift 22s ease-in-out infinite; +} +.aurora span:nth-child(1) { background: var(--accent-2); top: -10%; left: -5%; animation-delay: 0s; } +.aurora span:nth-child(2) { background: var(--accent); top: 20%; right: -10%; animation-delay: -7s; } +.aurora span:nth-child(3) { background: var(--accent-3); bottom: -15%; left: 25%; animation-delay: -13s; } + +@keyframes drift { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(6vw, 4vh) scale(1.15); } + 66% { transform: translate(-5vw, -3vh) scale(0.9); } +} + +/* faint dot grid on top of the aurora */ +.grid-overlay { + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); + background-size: 26px 26px; + mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%); +} + +/* -------------------------------------------------------------------------- + Navigation + Human/AI toggle (same markup as the human page) + -------------------------------------------------------------------------- */ +nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.9rem 1.4rem; + position: sticky; + top: 0; + z-index: 100; + background: rgba(10, 12, 20, 0.55); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + border-bottom: 1px solid var(--surface-border); +} + +.site-title { + font-weight: 700; + letter-spacing: 0.01em; + font-size: 1.05rem; + background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.toggle { + display: flex; + align-items: center; + gap: 0.55rem; + text-decoration: none; + cursor: pointer; +} +.toggle-label { + color: var(--text); + font-size: 0.82rem; + font-weight: 700; + letter-spacing: 0.05em; + opacity: 0.45; + transition: opacity 0.2s; +} +/* AI side active */ +.toggle--ai .toggle-label:first-child { opacity: 0.45; } +.toggle--ai .toggle-label:last-child { opacity: 1; } + +.toggle-track { + position: relative; + width: 3rem; + height: 1.5rem; + border-radius: 999px; + border: 2px solid rgba(255, 255, 255, 0.4); + background: linear-gradient(90deg, var(--accent), var(--accent-2)); + box-shadow: 0 0 14px rgba(124, 92, 255, 0.6); + transition: background 0.2s; +} +.toggle-knob { + position: absolute; + top: 50%; + left: calc(100% - 1rem - 3px); /* knob on the AI (right) side */ + transform: translateY(-50%); + width: 1rem; + height: 1rem; + background: #fff; + border-radius: 50%; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); + transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} +.toggle:hover .toggle-knob { left: calc(100% - 1rem - 5px); } + +/* -------------------------------------------------------------------------- + Layout + -------------------------------------------------------------------------- */ +main { + width: 90vw; + max-width: var(--maxw); + margin: 0 auto; + padding: 3.5rem 0 5rem; +} + +/* AI badge */ +.ai-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.9rem; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text); + border: 1px solid var(--surface-border); + background: rgba(124, 92, 255, 0.12); + position: relative; + overflow: hidden; +} +.ai-badge::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%); + transform: translateX(-100%); + animation: shimmer 3.5s ease-in-out infinite; +} +@keyframes shimmer { + 0%, 60% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} +.ai-badge .spark { + display: inline-block; + animation: spin-pulse 4s ease-in-out infinite; +} +@keyframes spin-pulse { + 0%, 100% { transform: rotate(0) scale(1); opacity: 1; } + 50% { transform: rotate(180deg) scale(1.25); opacity: 0.7; } +} + +/* Hero */ +.hero { margin: 1.6rem 0 2.5rem; } +.hero h1 { + font-size: clamp(2.4rem, 6vw, 3.6rem); + line-height: 1.05; + margin: 0.6rem 0 0.4rem; + letter-spacing: -0.02em; + background: linear-gradient(120deg, #ffffff 20%, var(--accent) 55%, var(--accent-2) 90%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.hero .subtitle { + color: var(--text-dim); + font-size: 1.05rem; + min-height: 1.7em; /* reserve space for the typewriter line */ +} +.hero .subtitle .typed-cursor { color: var(--accent); } + +/* Motto */ +.motto { + margin: 2.2rem 0; + padding: 1.2rem 1.4rem; + border-left: 2px solid transparent; + border-image: linear-gradient(180deg, var(--accent), var(--accent-3)) 1; + background: linear-gradient(90deg, rgba(124,92,255,0.08), transparent); + font-style: italic; + color: #c7cbe0; +} +.motto cite { + display: block; + margin-top: 0.6rem; + font-style: normal; + font-size: 0.85rem; + letter-spacing: 0.06em; + color: var(--text-dim); +} + +/* Glass content cards */ +.card { + position: relative; + background: var(--surface); + border: 1px solid var(--surface-border); + border-radius: var(--radius); + padding: 1.6rem 1.8rem; + margin: 1.4rem 0; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); + transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; +} +.card:hover { + transform: translateY(-4px); + border-color: rgba(124, 92, 255, 0.35); + box-shadow: 0 30px 70px -30px rgba(124, 92, 255, 0.4); +} +.card p:last-child { margin-bottom: 0; } + +h2 { + font-size: 1.4rem; + margin: 2.6rem 0 0.4rem; + letter-spacing: -0.01em; +} +h2 .accent { + background: linear-gradient(90deg, var(--accent), var(--accent-2)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +p { color: #d3d7e6; } +strong { color: #fff; } + +/* Tag chips for the "who am I" fields */ +.chips { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 1rem; +} +.chip { + font-size: 0.8rem; + padding: 0.35rem 0.75rem; + border-radius: 999px; + border: 1px solid var(--surface-border); + background: rgba(255, 255, 255, 0.03); + color: var(--text-dim); + transition: color 0.2s, border-color 0.2s, transform 0.2s; +} +.chip:hover { + color: var(--text); + border-color: var(--accent); + transform: translateY(-2px); +} + +/* Pipeline note / footer */ +.pipeline { + margin-top: 3rem; + padding: 1.2rem 1.4rem; + border-radius: var(--radius); + border: 1px dashed var(--surface-border); + background: rgba(255, 255, 255, 0.02); + font-size: 0.85rem; + color: var(--text-dim); + display: flex; + gap: 0.9rem; + align-items: flex-start; +} +.pipeline code { + color: var(--accent); + font-family: ui-monospace, "SF Mono", Menlo, monospace; +} +footer { + text-align: center; + color: var(--text-dim); + font-size: 0.8rem; + padding: 2rem 0 3rem; + letter-spacing: 0.03em; +} + +/* Respect reduced-motion preferences */ +@media (prefers-reduced-motion: reduce) { + .aurora span, + .ai-badge::after, + .ai-badge .spark { animation: none; } + html { scroll-behavior: auto; } +} diff --git a/css/human.css b/css/human.css new file mode 100644 index 0000000..dcd976d --- /dev/null +++ b/css/human.css @@ -0,0 +1,132 @@ +body { + width: 90vw; + max-width: 65ch; + margin-top: 40px; + margin: 0 auto; /* This centers the block */ + line-height: 1.6; + background-color: #FFFFFF; + /* box-shadow: 12px 12px 2px 1px rgb(0 0 255 / 0.2); */ + /* text-align: justify; */ + /* hyphens: auto; */ +} + +html { + background-color: #AAAAAA; +} + +.motto { + /* font-size: 1.5em; */ + margin-top: 20px; +} + +#mottotext { + width: fit-content; + text-align: left; + /* max-width: 330px; */ + color: #555; + /* margin-right: 10px; */ + margin-left: auto; + +} +/* nav { */ +/* position: sticky; */ +/* top: 0; */ +/* left -10px: z-index: 100; */ +/* background-color: #00AAFF; */ +/* height: 40px; */ +/* padding-left: 20px; */ +/* padding-top: 10px; */ +/* font-size: larger; */ +/* font-weight: bold; */ +/* font-style: italic; */ +/* } */ +/* */ + +nav { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #bd6b4e; + padding: 0.6rem 1.2rem; + margin: 0 -1.6rem; + border-radius: 14px 14px 0 0; +} + + +/* Toggle wrapper */ +.toggle { + display: flex; + align-items: center; + gap: 0.5rem; + text-decoration: none; + cursor: pointer; +} + +/* Labels: Human / AI */ +.toggle-label { + color: white; + font-size: 0.85rem; + font-weight: bold; + letter-spacing: 0.04em; + opacity: 0.6; /* inactive label is dimmed */ +} + +/* Active label: Human side on human page */ +.toggle .toggle-label:first-child { + opacity: 1; +} + +/* Active label: AI side on AI page */ +.toggle--ai .toggle-label:first-child { + opacity: 0.6; +} +.toggle--ai .toggle-label:last-child { + opacity: 1; +} + +/* The pill track */ +.toggle-track { + position: relative; + width: 3rem; + height: 1.5rem; + background-color: rgba(0, 0, 0, 0.25); + border-radius: 999px; + border: 2px solid rgba(255,255,255,0.5); + transition: background 0.2s; +} + +/* The knob */ +.toggle-knob { + position: absolute; + top: 50%; + left: 3px; + transform: translateY(-50%); + width: 1rem; + height: 1rem; + background-color: white; + border-radius: 50%; + transition: left 0.2s; +} + + +#scene { + position: fixed; + inset: 0; + width: 100%; + height: 100%; + z-index: -1; + display: block; +} + +.page { + width: 90vw; + max-width: 65ch; + margin: 6vh auto 8vh; + padding: 0 1.6rem 2rem; + background: rgba(250, 246, 238, 0.86); + backdrop-filter: blur(7px) saturate(112%); + -webkit-backdrop-filter: blur(7px) saturate(112%); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: 14px; + box-shadow: 0 30px 80px -40px rgba(60, 40, 20, 0.6); +} diff --git a/css/water.css b/css/water.css new file mode 100644 index 0000000..d5c741d --- /dev/null +++ b/css/water.css @@ -0,0 +1,1689 @@ +/** + * Automatic version: + * Uses light theme by default but switches to dark theme + * if a system-wide theme preference is set on the user's device. + */ + +:root { + --background-body: #fff; + --background: #efefef; + --background-alt: #f7f7f7; + --selection: #9e9e9e; + --text-main: #363636; + --text-bright: #000; + --text-muted: #70777f; + --links: #0076d1; + --focus: #0096bfab; + --border: #dbdbdb; + --code: #000; + --animation-duration: 0.1s; + --button-base: #d0cfcf; + --button-hover: #9b9b9b; + --scrollbar-thumb: rgb(170, 170, 170); + --scrollbar-thumb-hover: var(--button-hover); + --form-placeholder: #949494; + --form-text: #1d1d1d; + --variable: #39a33c; + --highlight: #ff0; + --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); +} + +@media (prefers-color-scheme: dark) { +:root { + --background-body: #202b38; + --background: #161f27; + --background-alt: #1a242f; + --selection: #1c76c5; + --text-main: #dbdbdb; + --text-bright: #fff; + --text-muted: #a9b1ba; + --links: #41adff; + --focus: #0096bfab; + --border: #526980; + --code: #ffbe85; + --animation-duration: 0.1s; + --button-base: #0c151c; + --button-hover: #040a0f; + --scrollbar-thumb: var(--button-hover); + --scrollbar-thumb-hover: rgb(0, 0, 0); + --form-placeholder: #a9a9a9; + --form-text: #fff; + --variable: #d941e2; + --highlight: #efdb43; + --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); +} +} + +html { + scrollbar-color: rgb(170, 170, 170) #fff; + scrollbar-color: var(--scrollbar-thumb) var(--background-body); + scrollbar-width: thin; +} + +@media (prefers-color-scheme: dark) { + + html { + scrollbar-color: #040a0f #202b38; + scrollbar-color: var(--scrollbar-thumb) var(--background-body); + } +} + +@media (prefers-color-scheme: dark) { + + html { + scrollbar-color: #040a0f #202b38; + scrollbar-color: var(--scrollbar-thumb) var(--background-body); + } +} + +@media (prefers-color-scheme: dark) { + + html { + scrollbar-color: #040a0f #202b38; + scrollbar-color: var(--scrollbar-thumb) var(--background-body); + } +} + +@media (prefers-color-scheme: dark) { + + html { + scrollbar-color: #040a0f #202b38; + scrollbar-color: var(--scrollbar-thumb) var(--background-body); + } +} + +@media (prefers-color-scheme: dark) { + + html { + scrollbar-color: #040a0f #202b38; + scrollbar-color: var(--scrollbar-thumb) var(--background-body); + } +} + +@media (prefers-color-scheme: dark) { + + html { + scrollbar-color: #040a0f #202b38; + scrollbar-color: var(--scrollbar-thumb) var(--background-body); + } +} + +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; + line-height: 1.4; + max-width: 800px; + margin: 20px auto; + padding: 0 10px; + word-wrap: break-word; + color: #363636; + color: var(--text-main); + background: #fff; + background: var(--background-body); + text-rendering: optimizeLegibility; +} + +@media (prefers-color-scheme: dark) { + + body { + background: #202b38; + background: var(--background-body); + } +} + +@media (prefers-color-scheme: dark) { + + body { + color: #dbdbdb; + color: var(--text-main); + } +} + +button { + transition: + background-color 0.1s linear, + border-color 0.1s linear, + color 0.1s linear, + box-shadow 0.1s linear, + transform 0.1s ease; + transition: + background-color var(--animation-duration) linear, + border-color var(--animation-duration) linear, + color var(--animation-duration) linear, + box-shadow var(--animation-duration) linear, + transform var(--animation-duration) ease; +} + +@media (prefers-color-scheme: dark) { + + button { + transition: + background-color 0.1s linear, + border-color 0.1s linear, + color 0.1s linear, + box-shadow 0.1s linear, + transform 0.1s ease; + transition: + background-color var(--animation-duration) linear, + border-color var(--animation-duration) linear, + color var(--animation-duration) linear, + box-shadow var(--animation-duration) linear, + transform var(--animation-duration) ease; + } +} + +input { + transition: + background-color 0.1s linear, + border-color 0.1s linear, + color 0.1s linear, + box-shadow 0.1s linear, + transform 0.1s ease; + transition: + background-color var(--animation-duration) linear, + border-color var(--animation-duration) linear, + color var(--animation-duration) linear, + box-shadow var(--animation-duration) linear, + transform var(--animation-duration) ease; +} + +@media (prefers-color-scheme: dark) { + + input { + transition: + background-color 0.1s linear, + border-color 0.1s linear, + color 0.1s linear, + box-shadow 0.1s linear, + transform 0.1s ease; + transition: + background-color var(--animation-duration) linear, + border-color var(--animation-duration) linear, + color var(--animation-duration) linear, + box-shadow var(--animation-duration) linear, + transform var(--animation-duration) ease; + } +} + +textarea { + transition: + background-color 0.1s linear, + border-color 0.1s linear, + color 0.1s linear, + box-shadow 0.1s linear, + transform 0.1s ease; + transition: + background-color var(--animation-duration) linear, + border-color var(--animation-duration) linear, + color var(--animation-duration) linear, + box-shadow var(--animation-duration) linear, + transform var(--animation-duration) ease; +} + +@media (prefers-color-scheme: dark) { + + textarea { + transition: + background-color 0.1s linear, + border-color 0.1s linear, + color 0.1s linear, + box-shadow 0.1s linear, + transform 0.1s ease; + transition: + background-color var(--animation-duration) linear, + border-color var(--animation-duration) linear, + color var(--animation-duration) linear, + box-shadow var(--animation-duration) linear, + transform var(--animation-duration) ease; + } +} + +h1 { + font-size: 2.2em; + margin-top: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 12px; + margin-top: 24px; +} + +h1 { + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + h1 { + color: #fff; + color: var(--text-bright); + } +} + +h2 { + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + h2 { + color: #fff; + color: var(--text-bright); + } +} + +h3 { + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + h3 { + color: #fff; + color: var(--text-bright); + } +} + +h4 { + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + h4 { + color: #fff; + color: var(--text-bright); + } +} + +h5 { + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + h5 { + color: #fff; + color: var(--text-bright); + } +} + +h6 { + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + h6 { + color: #fff; + color: var(--text-bright); + } +} + +strong { + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + strong { + color: #fff; + color: var(--text-bright); + } +} + +h1, +h2, +h3, +h4, +h5, +h6, +b, +strong, +th { + font-weight: 600; +} + +q::before { + content: none; +} + +q::after { + content: none; +} + +blockquote { + border-left: 4px solid #0096bfab; + border-left: 4px solid var(--focus); + margin: 1.5em 0; + padding: 0.5em 1em; + font-style: italic; +} + +@media (prefers-color-scheme: dark) { + + blockquote { + border-left: 4px solid #0096bfab; + border-left: 4px solid var(--focus); + } +} + +q { + border-left: 4px solid #0096bfab; + border-left: 4px solid var(--focus); + margin: 1.5em 0; + padding: 0.5em 1em; + font-style: italic; +} + +@media (prefers-color-scheme: dark) { + + q { + border-left: 4px solid #0096bfab; + border-left: 4px solid var(--focus); + } +} + +blockquote > footer { + font-style: normal; + border: 0; +} + +blockquote cite { + font-style: normal; +} + +address { + font-style: normal; +} + +a[href^='mailto\:']::before { + content: '📧 '; +} + +a[href^='tel\:']::before { + content: '📞 '; +} + +a[href^='sms\:']::before { + content: '💬 '; +} + +mark { + background-color: #ff0; + background-color: var(--highlight); + border-radius: 2px; + padding: 0 2px 0 2px; + color: #000; +} + +@media (prefers-color-scheme: dark) { + + mark { + background-color: #efdb43; + background-color: var(--highlight); + } +} + +a > code, +a > strong { + color: inherit; +} + +button, +select, +input[type='submit'], +input[type='reset'], +input[type='button'], +input[type='checkbox'], +input[type='range'], +input[type='radio'] { + cursor: pointer; +} + +input, +select { + display: block; +} + +[type='checkbox'], +[type='radio'] { + display: initial; +} + +input { + color: #1d1d1d; + color: var(--form-text); + background-color: #efefef; + background-color: var(--background); + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +@media (prefers-color-scheme: dark) { + + input { + background-color: #161f27; + background-color: var(--background); + } +} + +@media (prefers-color-scheme: dark) { + + input { + color: #fff; + color: var(--form-text); + } +} + +button { + color: #1d1d1d; + color: var(--form-text); + background-color: #efefef; + background-color: var(--background); + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +@media (prefers-color-scheme: dark) { + + button { + background-color: #161f27; + background-color: var(--background); + } +} + +@media (prefers-color-scheme: dark) { + + button { + color: #fff; + color: var(--form-text); + } +} + +textarea { + color: #1d1d1d; + color: var(--form-text); + background-color: #efefef; + background-color: var(--background); + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +@media (prefers-color-scheme: dark) { + + textarea { + background-color: #161f27; + background-color: var(--background); + } +} + +@media (prefers-color-scheme: dark) { + + textarea { + color: #fff; + color: var(--form-text); + } +} + +select { + color: #1d1d1d; + color: var(--form-text); + background-color: #efefef; + background-color: var(--background); + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +@media (prefers-color-scheme: dark) { + + select { + background-color: #161f27; + background-color: var(--background); + } +} + +@media (prefers-color-scheme: dark) { + + select { + color: #fff; + color: var(--form-text); + } +} + +button { + background-color: #d0cfcf; + background-color: var(--button-base); + padding-right: 30px; + padding-left: 30px; +} + +@media (prefers-color-scheme: dark) { + + button { + background-color: #0c151c; + background-color: var(--button-base); + } +} + +input[type='submit'] { + background-color: #d0cfcf; + background-color: var(--button-base); + padding-right: 30px; + padding-left: 30px; +} + +@media (prefers-color-scheme: dark) { + + input[type='submit'] { + background-color: #0c151c; + background-color: var(--button-base); + } +} + +input[type='reset'] { + background-color: #d0cfcf; + background-color: var(--button-base); + padding-right: 30px; + padding-left: 30px; +} + +@media (prefers-color-scheme: dark) { + + input[type='reset'] { + background-color: #0c151c; + background-color: var(--button-base); + } +} + +input[type='button'] { + background-color: #d0cfcf; + background-color: var(--button-base); + padding-right: 30px; + padding-left: 30px; +} + +@media (prefers-color-scheme: dark) { + + input[type='button'] { + background-color: #0c151c; + background-color: var(--button-base); + } +} + +button:hover { + background: #9b9b9b; + background: var(--button-hover); +} + +@media (prefers-color-scheme: dark) { + + button:hover { + background: #040a0f; + background: var(--button-hover); + } +} + +input[type='submit']:hover { + background: #9b9b9b; + background: var(--button-hover); +} + +@media (prefers-color-scheme: dark) { + + input[type='submit']:hover { + background: #040a0f; + background: var(--button-hover); + } +} + +input[type='reset']:hover { + background: #9b9b9b; + background: var(--button-hover); +} + +@media (prefers-color-scheme: dark) { + + input[type='reset']:hover { + background: #040a0f; + background: var(--button-hover); + } +} + +input[type='button']:hover { + background: #9b9b9b; + background: var(--button-hover); +} + +@media (prefers-color-scheme: dark) { + + input[type='button']:hover { + background: #040a0f; + background: var(--button-hover); + } +} + +input[type='color'] { + min-height: 2rem; + padding: 8px; + cursor: pointer; +} + +input[type='checkbox'], +input[type='radio'] { + height: 1em; + width: 1em; +} + +input[type='radio'] { + border-radius: 100%; +} + +input { + vertical-align: top; +} + +label { + vertical-align: middle; + margin-bottom: 4px; + display: inline-block; +} + +input:not([type='checkbox']):not([type='radio']), +input[type='range'], +select, +button, +textarea { + -webkit-appearance: none; +} + +textarea { + display: block; + margin-right: 0; + box-sizing: border-box; + resize: vertical; +} + +textarea:not([cols]) { + width: 100%; +} + +textarea:not([rows]) { + min-height: 40px; + height: 140px; +} + +select { + background: #efefef url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; + background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; + padding-right: 35px; +} + +@media (prefers-color-scheme: dark) { + + select { + background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; + background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; + } +} + +@media (prefers-color-scheme: dark) { + + select { + background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; + background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; + } +} + +@media (prefers-color-scheme: dark) { + + select { + background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; + background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; + } +} + +@media (prefers-color-scheme: dark) { + + select { + background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; + background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; + } +} + +select::-ms-expand { + display: none; +} + +select[multiple] { + padding-right: 10px; + background-image: none; + overflow-y: auto; +} + +input:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); +} + +@media (prefers-color-scheme: dark) { + + input:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); + } +} + +select:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); +} + +@media (prefers-color-scheme: dark) { + + select:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); + } +} + +button:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); +} + +@media (prefers-color-scheme: dark) { + + button:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); + } +} + +textarea:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); +} + +@media (prefers-color-scheme: dark) { + + textarea:focus { + box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); + } +} + +input[type='checkbox']:active, +input[type='radio']:active, +input[type='submit']:active, +input[type='reset']:active, +input[type='button']:active, +input[type='range']:active, +button:active { + transform: translateY(2px); +} + +input:disabled, +select:disabled, +button:disabled, +textarea:disabled { + cursor: not-allowed; + opacity: 0.5; +} + +::-moz-placeholder { + color: #949494; + color: var(--form-placeholder); +} + +:-ms-input-placeholder { + color: #949494; + color: var(--form-placeholder); +} + +::-ms-input-placeholder { + color: #949494; + color: var(--form-placeholder); +} + +::placeholder { + color: #949494; + color: var(--form-placeholder); +} + +@media (prefers-color-scheme: dark) { + + ::-moz-placeholder { + color: #a9a9a9; + color: var(--form-placeholder); + } + + :-ms-input-placeholder { + color: #a9a9a9; + color: var(--form-placeholder); + } + + ::-ms-input-placeholder { + color: #a9a9a9; + color: var(--form-placeholder); + } + + ::placeholder { + color: #a9a9a9; + color: var(--form-placeholder); + } +} + +fieldset { + border: 1px #0096bfab solid; + border: 1px var(--focus) solid; + border-radius: 6px; + margin: 0; + margin-bottom: 12px; + padding: 10px; +} + +@media (prefers-color-scheme: dark) { + + fieldset { + border: 1px #0096bfab solid; + border: 1px var(--focus) solid; + } +} + +legend { + font-size: 0.9em; + font-weight: 600; +} + +input[type='range'] { + margin: 10px 0; + padding: 10px 0; + background: transparent; +} + +input[type='range']:focus { + outline: none; +} + +input[type='range']::-webkit-slider-runnable-track { + width: 100%; + height: 9.5px; + -webkit-transition: 0.2s; + transition: 0.2s; + background: #efefef; + background: var(--background); + border-radius: 3px; +} + +@media (prefers-color-scheme: dark) { + + input[type='range']::-webkit-slider-runnable-track { + background: #161f27; + background: var(--background); + } +} + +input[type='range']::-webkit-slider-thumb { + box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d; + height: 20px; + width: 20px; + border-radius: 50%; + background: #dbdbdb; + background: var(--border); + -webkit-appearance: none; + margin-top: -7px; +} + +@media (prefers-color-scheme: dark) { + + input[type='range']::-webkit-slider-thumb { + background: #526980; + background: var(--border); + } +} + +input[type='range']:focus::-webkit-slider-runnable-track { + background: #efefef; + background: var(--background); +} + +@media (prefers-color-scheme: dark) { + + input[type='range']:focus::-webkit-slider-runnable-track { + background: #161f27; + background: var(--background); + } +} + +input[type='range']::-moz-range-track { + width: 100%; + height: 9.5px; + -moz-transition: 0.2s; + transition: 0.2s; + background: #efefef; + background: var(--background); + border-radius: 3px; +} + +@media (prefers-color-scheme: dark) { + + input[type='range']::-moz-range-track { + background: #161f27; + background: var(--background); + } +} + +input[type='range']::-moz-range-thumb { + box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; + height: 20px; + width: 20px; + border-radius: 50%; + background: #dbdbdb; + background: var(--border); +} + +@media (prefers-color-scheme: dark) { + + input[type='range']::-moz-range-thumb { + background: #526980; + background: var(--border); + } +} + +input[type='range']::-ms-track { + width: 100%; + height: 9.5px; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; +} + +input[type='range']::-ms-fill-lower { + background: #efefef; + background: var(--background); + border: 0.2px solid #010101; + border-radius: 3px; + box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; +} + +@media (prefers-color-scheme: dark) { + + input[type='range']::-ms-fill-lower { + background: #161f27; + background: var(--background); + } +} + +input[type='range']::-ms-fill-upper { + background: #efefef; + background: var(--background); + border: 0.2px solid #010101; + border-radius: 3px; + box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; +} + +@media (prefers-color-scheme: dark) { + + input[type='range']::-ms-fill-upper { + background: #161f27; + background: var(--background); + } +} + +input[type='range']::-ms-thumb { + box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; + border: 1px solid #000; + height: 20px; + width: 20px; + border-radius: 50%; + background: #dbdbdb; + background: var(--border); +} + +@media (prefers-color-scheme: dark) { + + input[type='range']::-ms-thumb { + background: #526980; + background: var(--border); + } +} + +input[type='range']:focus::-ms-fill-lower { + background: #efefef; + background: var(--background); +} + +@media (prefers-color-scheme: dark) { + + input[type='range']:focus::-ms-fill-lower { + background: #161f27; + background: var(--background); + } +} + +input[type='range']:focus::-ms-fill-upper { + background: #efefef; + background: var(--background); +} + +@media (prefers-color-scheme: dark) { + + input[type='range']:focus::-ms-fill-upper { + background: #161f27; + background: var(--background); + } +} + +a { + text-decoration: none; + color: #0076d1; + color: var(--links); +} + +@media (prefers-color-scheme: dark) { + + a { + color: #41adff; + color: var(--links); + } +} + +a:hover { + text-decoration: underline; +} + +code { + background: #efefef; + background: var(--background); + color: #000; + color: var(--code); + padding: 2.5px 5px; + border-radius: 6px; + font-size: 1em; +} + +@media (prefers-color-scheme: dark) { + + code { + color: #ffbe85; + color: var(--code); + } +} + +@media (prefers-color-scheme: dark) { + + code { + background: #161f27; + background: var(--background); + } +} + +samp { + background: #efefef; + background: var(--background); + color: #000; + color: var(--code); + padding: 2.5px 5px; + border-radius: 6px; + font-size: 1em; +} + +@media (prefers-color-scheme: dark) { + + samp { + color: #ffbe85; + color: var(--code); + } +} + +@media (prefers-color-scheme: dark) { + + samp { + background: #161f27; + background: var(--background); + } +} + +time { + background: #efefef; + background: var(--background); + color: #000; + color: var(--code); + padding: 2.5px 5px; + border-radius: 6px; + font-size: 1em; +} + +@media (prefers-color-scheme: dark) { + + time { + color: #ffbe85; + color: var(--code); + } +} + +@media (prefers-color-scheme: dark) { + + time { + background: #161f27; + background: var(--background); + } +} + +pre > code { + padding: 10px; + display: block; + overflow-x: auto; +} + +var { + color: #39a33c; + color: var(--variable); + font-style: normal; + font-family: monospace; +} + +@media (prefers-color-scheme: dark) { + + var { + color: #d941e2; + color: var(--variable); + } +} + +kbd { + background: #efefef; + background: var(--background); + border: 1px solid #dbdbdb; + border: 1px solid var(--border); + border-radius: 2px; + color: #363636; + color: var(--text-main); + padding: 2px 4px 2px 4px; +} + +@media (prefers-color-scheme: dark) { + + kbd { + color: #dbdbdb; + color: var(--text-main); + } +} + +@media (prefers-color-scheme: dark) { + + kbd { + border: 1px solid #526980; + border: 1px solid var(--border); + } +} + +@media (prefers-color-scheme: dark) { + + kbd { + background: #161f27; + background: var(--background); + } +} + +img, +video { + max-width: 100%; + height: auto; +} + +hr { + border: none; + border-top: 1px solid #dbdbdb; + border-top: 1px solid var(--border); +} + +@media (prefers-color-scheme: dark) { + + hr { + border-top: 1px solid #526980; + border-top: 1px solid var(--border); + } +} + +table { + border-collapse: collapse; + margin-bottom: 10px; + width: 100%; + table-layout: fixed; +} + +table caption { + text-align: left; +} + +td, +th { + padding: 6px; + text-align: left; + vertical-align: top; + word-wrap: break-word; +} + +thead { + border-bottom: 1px solid #dbdbdb; + border-bottom: 1px solid var(--border); +} + +@media (prefers-color-scheme: dark) { + + thead { + border-bottom: 1px solid #526980; + border-bottom: 1px solid var(--border); + } +} + +tfoot { + border-top: 1px solid #dbdbdb; + border-top: 1px solid var(--border); +} + +@media (prefers-color-scheme: dark) { + + tfoot { + border-top: 1px solid #526980; + border-top: 1px solid var(--border); + } +} + +tbody tr:nth-child(even) { + background-color: #efefef; + background-color: var(--background); +} + +@media (prefers-color-scheme: dark) { + + tbody tr:nth-child(even) { + background-color: #161f27; + background-color: var(--background); + } +} + +tbody tr:nth-child(even) button { + background-color: #f7f7f7; + background-color: var(--background-alt); +} + +@media (prefers-color-scheme: dark) { + + tbody tr:nth-child(even) button { + background-color: #1a242f; + background-color: var(--background-alt); + } +} + +tbody tr:nth-child(even) button:hover { + background-color: #fff; + background-color: var(--background-body); +} + +@media (prefers-color-scheme: dark) { + + tbody tr:nth-child(even) button:hover { + background-color: #202b38; + background-color: var(--background-body); + } +} + +::-webkit-scrollbar { + height: 10px; + width: 10px; +} + +::-webkit-scrollbar-track { + background: #efefef; + background: var(--background); + border-radius: 6px; +} + +@media (prefers-color-scheme: dark) { + + ::-webkit-scrollbar-track { + background: #161f27; + background: var(--background); + } +} + +::-webkit-scrollbar-thumb { + background: rgb(170, 170, 170); + background: var(--scrollbar-thumb); + border-radius: 6px; +} + +@media (prefers-color-scheme: dark) { + + ::-webkit-scrollbar-thumb { + background: #040a0f; + background: var(--scrollbar-thumb); + } +} + +@media (prefers-color-scheme: dark) { + + ::-webkit-scrollbar-thumb { + background: #040a0f; + background: var(--scrollbar-thumb); + } +} + +::-webkit-scrollbar-thumb:hover { + background: #9b9b9b; + background: var(--scrollbar-thumb-hover); +} + +@media (prefers-color-scheme: dark) { + + ::-webkit-scrollbar-thumb:hover { + background: rgb(0, 0, 0); + background: var(--scrollbar-thumb-hover); + } +} + +@media (prefers-color-scheme: dark) { + + ::-webkit-scrollbar-thumb:hover { + background: rgb(0, 0, 0); + background: var(--scrollbar-thumb-hover); + } +} + +::-moz-selection { + background-color: #9e9e9e; + background-color: var(--selection); + color: #000; + color: var(--text-bright); +} + +::selection { + background-color: #9e9e9e; + background-color: var(--selection); + color: #000; + color: var(--text-bright); +} + +@media (prefers-color-scheme: dark) { + + ::-moz-selection { + color: #fff; + color: var(--text-bright); + } + + ::selection { + color: #fff; + color: var(--text-bright); + } +} + +@media (prefers-color-scheme: dark) { + + ::-moz-selection { + background-color: #1c76c5; + background-color: var(--selection); + } + + ::selection { + background-color: #1c76c5; + background-color: var(--selection); + } +} + +details { + display: flex; + flex-direction: column; + align-items: flex-start; + background-color: #f7f7f7; + background-color: var(--background-alt); + padding: 10px 10px 0; + margin: 1em 0; + border-radius: 6px; + overflow: hidden; +} + +@media (prefers-color-scheme: dark) { + + details { + background-color: #1a242f; + background-color: var(--background-alt); + } +} + +details[open] { + padding: 10px; +} + +details > :last-child { + margin-bottom: 0; +} + +details[open] summary { + margin-bottom: 10px; +} + +summary { + display: list-item; + background-color: #efefef; + background-color: var(--background); + padding: 10px; + margin: -10px -10px 0; + cursor: pointer; + outline: none; +} + +@media (prefers-color-scheme: dark) { + + summary { + background-color: #161f27; + background-color: var(--background); + } +} + +summary:hover, +summary:focus { + text-decoration: underline; +} + +details > :not(summary) { + margin-top: 0; +} + +summary::-webkit-details-marker { + color: #363636; + color: var(--text-main); +} + +@media (prefers-color-scheme: dark) { + + summary::-webkit-details-marker { + color: #dbdbdb; + color: var(--text-main); + } +} + +dialog { + background-color: #f7f7f7; + background-color: var(--background-alt); + color: #363636; + color: var(--text-main); + border: none; + border-radius: 6px; + border-color: #dbdbdb; + border-color: var(--border); + padding: 10px 30px; +} + +@media (prefers-color-scheme: dark) { + + dialog { + border-color: #526980; + border-color: var(--border); + } +} + +@media (prefers-color-scheme: dark) { + + dialog { + color: #dbdbdb; + color: var(--text-main); + } +} + +@media (prefers-color-scheme: dark) { + + dialog { + background-color: #1a242f; + background-color: var(--background-alt); + } +} + +dialog > header:first-child { + background-color: #efefef; + background-color: var(--background); + border-radius: 6px 6px 0 0; + margin: -10px -30px 10px; + padding: 10px; + text-align: center; +} + +@media (prefers-color-scheme: dark) { + + dialog > header:first-child { + background-color: #161f27; + background-color: var(--background); + } +} + +dialog::-webkit-backdrop { + background: #0000009c; + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); +} + +dialog::backdrop { + background: #0000009c; + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); +} + +footer { + border-top: 1px solid #dbdbdb; + border-top: 1px solid var(--border); + padding-top: 10px; + color: #70777f; + color: var(--text-muted); +} + +@media (prefers-color-scheme: dark) { + + footer { + color: #a9b1ba; + color: var(--text-muted); + } +} + +@media (prefers-color-scheme: dark) { + + footer { + border-top: 1px solid #526980; + border-top: 1px solid var(--border); + } +} + +body > footer { + margin-top: 40px; +} + +@media print { + body, + pre, + code, + summary, + details, + button, + input, + textarea { + background-color: #fff; + } + + button, + input, + textarea { + border: 1px solid #000; + } + + body, + h1, + h2, + h3, + h4, + h5, + h6, + pre, + code, + button, + input, + textarea, + footer, + summary, + strong { + color: #000; + } + + summary::marker { + color: #000; + } + + summary::-webkit-details-marker { + color: #000; + } + + tbody tr:nth-child(even) { + background-color: #f2f2f2; + } + + a { + color: #00f; + text-decoration: underline; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..f6695be --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ + + + + + + + Roland Hollós + + + +
+ +
+
+ In the midway of this our mortal life,
+ I found me in a gloomy wood, astray
+ Gone from the path direct: and e’en to tell
+ -- Dante's Inferno
+
+
+ +
+

+ Every good talk between us mortals, alien to each other, starts with a proper introduction. This way we can get enough inspiration to open up ourself. In this online world, where intimacy is almost impossible ,this kind of introduction feels scary, and show us vulnerable. Taking the risk, here you can find me open. +

+ +

+ This is why this site is written purely by me: human. I do not hide my imperfections, I embrace them, while offering you the standards which would make my reading more easily digestable and familiar in the AI enhanced world I created an automated pipeline which translates my whole website to something fancy using AI. That website can be accessed using the AI switch on the top of the web site (similarly to dark-mode switch I have an LLM-mode too). +

+ +

+ Everyone seek connection (Deleuze would agree with this) as this is one of the most important aspect of being a human. Common origin, shared experiences, mutual interdependence makes the relationship possible at all. My main question is that how AI supports this activity? Are there any human-AI complementarity? Instead of answering the question directly, I really wanted to give you an option to make your decision. I am quite curious how much the expression, the relationship between us would loose or gain with the advancements of AI. +

+ +

Who am I?

+ + I am Roland Hollós a Hungarian environmental scientist, who is mainly driven by curiocity, the deep wish of creation. I leave mainly at the crossroad of Environmental Science, Mathematics, Computer Science, however I am fascinated consumer of Philosophy, Sociology, Psychology, History, Literature too. + +
+
+ + + + diff --git a/js/background.js b/js/background.js new file mode 100644 index 0000000..9608888 --- /dev/null +++ b/js/background.js @@ -0,0 +1,104 @@ +const LEAF_PATHS = { + ovate: { + blade: "M 0 0.5 Q -0.32 0.05 0 -0.5 Q 0.32 0.05 0 0.5 Z", + veins: "M 0 0.5 L 0 -0.5 M 0 0.28 L -0.35 0.12 M 0 0.28 L 0.35 0.12 M 0 0.12 L -0.35 -0.04 M 0 0.12 L 0.35 -0.04 M 0 -0.04 L -0.35 -0.2 M 0 -0.04 L 0.35 -0.2 M 0 -0.2 L -0.35 -0.36 M 0 -0.2 L 0.35 -0.36 M 0 -0.36 L -0.35 -0.52 M 0 -0.36 L 0.35 -0.52", + }, + lanceolate: { + blade: "M 0 0.5 Q -0.1524 0.0238 0 -0.5 Q 0.1524 0.0238 0 0.5 Z", + veins: "M 0 0.5 L 0 -0.4524 M 0 0.2905 L -0.3333 0.1381 M 0 0.2905 L 0.3333 0.1381 M 0 0.1381 L -0.3333 -0.0143 M 0 0.1381 L 0.3333 -0.0143 M 0 -0.0143 L -0.3333 -0.1667 M 0 -0.0143 L 0.3333 -0.1667 M 0 -0.1667 L -0.3333 -0.319 M 0 -0.1667 L 0.3333 -0.319 M 0 -0.319 L -0.3333 -0.4714 M 0 -0.319 L 0.3333 -0.4714", + }, + cordate: { + blade: "M 0 -0.5 C 0.5412 -0.1941 0.4235 0.5588 0.0706 0.4176 Q 0 0.5824 -0.0706 0.4176 C -0.4235 0.5588 -0.5412 -0.1941 0 -0.5 Z", + veins: "M 0 0.4412 L 0 -0.5 M 0 0.2341 L -0.4118 0.0459 M 0 0.2341 L 0.4118 0.0459 M 0 0.0835 L -0.4118 -0.1047 M 0 0.0835 L 0.4118 -0.1047 M 0 -0.0671 L -0.4118 -0.2553 M 0 -0.0671 L 0.4118 -0.2553 M 0 -0.2176 L -0.4118 -0.4059 M 0 -0.2176 L 0.4118 -0.4059 M 0 -0.3682 L -0.4118 -0.5565 M 0 -0.3682 L 0.4118 -0.5565", + }, + serrate: { + blade: "M 0 0.5 L -0.1026 0.3889 L -0.1504 0.2778 L -0.2598 0.1667 L -0.2304 0.0556 L -0.2954 -0.0556 L -0.2026 -0.1667 L -0.1928 -0.2778 L -0.08 -0.3889 L 0 -0.5 L 0 -0.5 L 0.08 -0.3889 L 0.1928 -0.2778 L 0.2026 -0.1667 L 0.2954 -0.0556 L 0.2304 0.0556 L 0.2598 0.1667 L 0.1504 0.2778 L 0.1026 0.3889 Z", + veins: "M 0 0.5 L 0 -0.5 M 0 0.28 L -0.35 0.12 M 0 0.28 L 0.35 0.12 M 0 0.12 L -0.35 -0.04 M 0 0.12 L 0.35 -0.04 M 0 -0.04 L -0.35 -0.2 M 0 -0.04 L 0.35 -0.2 M 0 -0.2 L -0.35 -0.36 M 0 -0.2 L 0.35 -0.36 M 0 -0.36 L -0.35 -0.52 M 0 -0.36 L 0.35 -0.52", + }, + maple: { // Acer pseudoplatanus — 5 palmate lobes + blade: "M 0 -0.5 L 0.1119 -0.2575 L 0.1052 -0.02 L 0.3016 -0.1953 L 0.4915 -0.2399 L 0.3528 0.0221 L 0.2627 0.141 L 0.5266 0.1572 L 0.5691 0.2691 L 0.3803 0.3927 L 0.2546 0.468 L 0.1228 0.5 L 0 0.4691 L -0.1228 0.5 L -0.2546 0.468 L -0.3803 0.3927 L -0.5691 0.2691 L -0.5266 0.1572 L -0.2627 0.141 L -0.3528 0.0221 L -0.4915 -0.2399 L -0.3016 -0.1953 L -0.1052 -0.02 L -0.1119 -0.2575 Z", + veins: "M 0 0.4691 L 0 -0.5 M 0 0.4691 L 0.4915 -0.2399 M 0 0.4691 L 0.5691 0.2691 M 0 0.4691 L -0.4915 -0.2399 M 0 0.4691 L -0.5691 0.2691", + }, + oak: { // Quercus robur — obovate, rounded lobes + blade: "M 0 0.5 L 0.001 0.4889 L 0.003 0.4778 L 0.0062 0.4667 L 0.0109 0.4556 L 0.0173 0.4444 L 0.0253 0.4333 L 0.0343 0.4222 L 0.0437 0.4111 L 0.0524 0.4 L 0.0596 0.3889 L 0.0644 0.3778 L 0.0664 0.3667 L 0.0656 0.3556 L 0.0626 0.3444 L 0.0584 0.3333 L 0.0546 0.3222 L 0.0527 0.3111 L 0.0544 0.3 L 0.0612 0.2889 L 0.0737 0.2778 L 0.092 0.2667 L 0.1152 0.2556 L 0.1417 0.2444 L 0.1692 0.2333 L 0.195 0.2222 L 0.2164 0.2111 L 0.231 0.2 L 0.2372 0.1889 L 0.2343 0.1778 L 0.223 0.1667 L 0.2051 0.1556 L 0.1832 0.1444 L 0.161 0.1333 L 0.1422 0.1222 L 0.1304 0.1111 L 0.1285 0.1 L 0.1381 0.0889 L 0.1594 0.0778 L 0.1911 0.0667 L 0.2304 0.0556 L 0.2732 0.0444 L 0.315 0.0333 L 0.351 0.0222 L 0.377 0.0111 L 0.39 0 L 0.3884 -0.0111 L 0.3724 -0.0222 L 0.3443 -0.0333 L 0.3076 -0.0444 L 0.2672 -0.0556 L 0.2283 -0.0667 L 0.1962 -0.0778 L 0.1751 -0.0889 L 0.1679 -0.1 L 0.1756 -0.1111 L 0.1973 -0.1222 L 0.2301 -0.1333 L 0.2699 -0.1444 L 0.3114 -0.1556 L 0.3492 -0.1667 L 0.3782 -0.1778 L 0.3947 -0.1889 L 0.3965 -0.2 L 0.3832 -0.2111 L 0.3564 -0.2222 L 0.3192 -0.2333 L 0.2761 -0.2444 L 0.2318 -0.2556 L 0.1913 -0.2667 L 0.1585 -0.2778 L 0.1362 -0.2889 L 0.1254 -0.3 L 0.1257 -0.3111 L 0.135 -0.3222 L 0.1502 -0.3333 L 0.1673 -0.3444 L 0.1826 -0.3556 L 0.1928 -0.3667 L 0.1954 -0.3778 L 0.1896 -0.3889 L 0.1754 -0.4 L 0.1545 -0.4111 L 0.129 -0.4222 L 0.1018 -0.4333 L 0.0756 -0.4444 L 0.0524 -0.4556 L 0.0335 -0.4667 L 0.0192 -0.4778 L 0.0086 -0.4889 L 0 -0.5 L 0 -0.5 L -0.0086 -0.4889 L -0.0192 -0.4778 L -0.0335 -0.4667 L -0.0524 -0.4556 L -0.0756 -0.4444 L -0.1018 -0.4333 L -0.129 -0.4222 L -0.1545 -0.4111 L -0.1754 -0.4 L -0.1896 -0.3889 L -0.1954 -0.3778 L -0.1928 -0.3667 L -0.1826 -0.3556 L -0.1673 -0.3444 L -0.1502 -0.3333 L -0.135 -0.3222 L -0.1257 -0.3111 L -0.1254 -0.3 L -0.1362 -0.2889 L -0.1585 -0.2778 L -0.1913 -0.2667 L -0.2318 -0.2556 L -0.2761 -0.2444 L -0.3192 -0.2333 L -0.3564 -0.2222 L -0.3832 -0.2111 L -0.3965 -0.2 L -0.3947 -0.1889 L -0.3782 -0.1778 L -0.3492 -0.1667 L -0.3114 -0.1556 L -0.2699 -0.1444 L -0.2301 -0.1333 L -0.1973 -0.1222 L -0.1756 -0.1111 L -0.1679 -0.1 L -0.1751 -0.0889 L -0.1962 -0.0778 L -0.2283 -0.0667 L -0.2672 -0.0556 L -0.3076 -0.0444 L -0.3443 -0.0333 L -0.3724 -0.0222 L -0.3884 -0.0111 L -0.39 0 L -0.377 0.0111 L -0.351 0.0222 L -0.315 0.0333 L -0.2732 0.0444 L -0.2304 0.0556 L -0.1911 0.0667 L -0.1594 0.0778 L -0.1381 0.0889 L -0.1285 0.1 L -0.1304 0.1111 L -0.1422 0.1222 L -0.161 0.1333 L -0.1832 0.1444 L -0.2051 0.1556 L -0.223 0.1667 L -0.2343 0.1778 L -0.2372 0.1889 L -0.231 0.2 L -0.2164 0.2111 L -0.195 0.2222 L -0.1692 0.2333 L -0.1417 0.2444 L -0.1152 0.2556 L -0.092 0.2667 L -0.0737 0.2778 L -0.0612 0.2889 L -0.0544 0.3 L -0.0527 0.3111 L -0.0546 0.3222 L -0.0584 0.3333 L -0.0626 0.3444 L -0.0656 0.3556 L -0.0664 0.3667 L -0.0644 0.3778 L -0.0596 0.3889 L -0.0524 0.4 L -0.0437 0.4111 L -0.0343 0.4222 L -0.0253 0.4333 L -0.0173 0.4444 L -0.0109 0.4556 L -0.0062 0.4667 L -0.003 0.4778 L -0.001 0.4889 L 0 0.5 Z", + veins: "M 0 0.5 L 0 -0.5 M 0 0.42 L 0.0445 0.37 M 0 0.42 L -0.0445 0.37 M 0 0.22 L 0.1963 0.17 M 0 0.22 L -0.1963 0.17 M 0 0.02 L 0.3315 -0.03 M 0 0.02 L -0.3315 -0.03 M 0 -0.18 L 0.337 -0.23 M 0 -0.18 L -0.337 -0.23 M 0 -0.38 L 0.1491 -0.43 M 0 -0.38 L -0.1491 -0.43", + }, + svg_green: { // hand-drawn in Inkscape (leafs.svg) — pointed almond + blade: "M 0.0514 0.4973 C -0.1305 0.5352 -0.3584 0.182 -0.2801 -0.0684 C -0.2017 -0.3188 -0.0818 -0.5445 0.0791 -0.4927 C 0.2399 -0.4408 0.2399 -0.3306 0.2848 -0.1265 C 0.3298 0.0775 0.2332 0.4594 0.0514 0.4973 Z", + veins: "M 0.0193 0.4898 L 0.0442 -0.504 M 0.0316 -0.2053 L 0.2236 -0.354 M 0.0271 -0.0559 L 0.262 -0.1777 M 0.0259 0.0672 L 0.2761 -0.0601 M 0.028 0.2016 L 0.285 0.0544 M 0.0222 0.3163 L 0.2589 0.1954 M 0.0184 0.4021 L 0.229 0.2936 M 0.0348 -0.2121 L -0.1572 -0.3608 M 0.0357 -0.0613 L -0.2182 -0.1984 M 0.036 0.068 L -0.2631 -0.0951 M 0.0225 0.1977 L -0.2901 0.0215 M 0.0273 0.3232 L -0.2738 0.1665 M 0.0187 0.402 L -0.2262 0.2735", + }, + svg_willow: { // hand-drawn — narrow willow-like blade + blade: "M -0.0984 0.5 C -0.0984 0.5 -0.2228 0.3124 -0.0792 -0.1154 C 0.0643 -0.5433 0.0739 -0.4987 0.0739 -0.4987 C 0.0739 -0.4987 0.2377 -0.1933 0.0797 0.1406 C -0.0782 0.4745 -0.0984 0.5 -0.0984 0.5 Z", + veins: "M -0.1045 0.4845 C -0.0629 0.3388 -0.0284 0.1911 -0.001 0.0422 C 0.032 -0.137 0.0546 -0.318 0.0667 -0.4998", + }, + svg_round: { // hand-drawn — round leaf + blade: "M 0.3991 0.1009 C 0.3991 0.3213 0.2204 0.5 0 0.5 C -0.2204 0.5 -0.3991 0.3213 -0.3991 0.1009 C -0.3991 -0.1196 -0.2012 -0.4094 -0.0112 -0.5 C 0.1718 -0.4111 0.3991 -0.1196 0.3991 0.1009 Z", + veins: "M 0.0051 0.49 L -0.0158 -0.501 M 0.0039 0.4735 L 0.3738 0.2145 M 0.0023 0.367 L 0.3828 0.0882 M -0.0037 0.2768 L 0.3712 -0.0008 M -0.002 0.1811 L 0.329 -0.07 M -0.0005 0.0801 L 0.3013 -0.1694 M -0.0069 -0.0245 L 0.2626 -0.2399 M -0.005 -0.1172 L 0.2167 -0.2924 M -0.0076 -0.2136 L 0.1499 -0.3557 M -0.0124 -0.311 L 0.1041 -0.4158 M -0.0043 0.4633 L -0.3516 0.2867 M -0.0066 0.3665 L -0.3971 0.1691 M -0.0012 0.26 L -0.3996 0.0719 M -0.0079 0.1725 L -0.3831 -0.0091 M -0.0015 0.0729 L -0.3557 -0.0868 M -0.0029 -0.0347 L -0.3159 -0.1785 M -0.0061 -0.1237 L -0.2849 -0.2467 M -0.0085 -0.2157 L -0.2322 -0.3099 M -0.0191 -0.3209 L -0.1597 -0.3891", + }, +}; + +function leafColor() { + const r = Math.random(); + let h, s, l; + if (r < 0.60) { // greens + h = 80 + Math.random() * 55; s = 30 + Math.random() * 30; l = 28 + Math.random() * 20; + } else if (r < 0.85) { // amber / gold + h = 34 + Math.random() * 18; s = 55 + Math.random() * 25; l = 40 + Math.random() * 12; + } else { // rust / brown + h = 14 + Math.random() * 16; s = 45 + Math.random() * 25; l = 30 + Math.random() * 12; + } + return `hsl(${h}, ${s}%, ${l}%)`; +} + +function paintRandomLeaf(ctx,leaf, W, H){ + ctx.save(); + ctx.translate(Math.random() * W, Math.random() * H); + ctx.rotate(Math.random() * 2 * Math.PI); + const scale = 40 + Math.random() ** 2 * 56; + ctx.scale(scale, scale); + ctx.fillStyle = leafColor(); + ctx.strokeStyle = "rgba(0,0,0,0.2)"; + ctx.shadowColor = "rgba(40, 45, 25, 0.28)"; + ctx.shadowBlur = scale * 0.12; + ctx.lineWidth = 0.02; + ctx.beginPath(); + const path = new Path2D(leaf.blade); + ctx.fill(path); + ctx.stroke(path); + ctx.clip(path); + const veinsPath = new Path2D(leaf.veins); + ctx.shadowColor = "transparent"; + ctx.stroke(veinsPath); + ctx.restore(); +} + +function draw(){ + const dpr = window.devicePixelRatio || 1; + const W = window.innerWidth, H = window.innerHeight; + canvas.width = W * dpr; + canvas.height = H * dpr; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // now you draw in CSS pixels + + const g = ctx.createRadialGradient( + W / 2, H * 0.35, 0, + W / 2, H * 0.5, Math.max(W, H) * 0.8 + ); + g.addColorStop(0, "#f7f3ea"); // warm cream (center) + g.addColorStop(1, "#e7ddca"); // soft sand (edges) + ctx.fillStyle = g; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + for (let i = 0; i < 150; i++) { + const leafTypes = Object.keys(LEAF_PATHS); + const randomLeafType = leafTypes[Math.floor(Math.random() * leafTypes.length)]; + const leaf = LEAF_PATHS[randomLeafType]; + paintRandomLeaf(ctx, leaf, W, H); + } + +} + + +const canvas = document.getElementById("scene"); +const ctx = canvas.getContext("2d"); +draw(); +window.addEventListener("resize", draw); diff --git a/writings/measure.md b/writings/measure.md new file mode 100644 index 0000000..52be8b1 --- /dev/null +++ b/writings/measure.md @@ -0,0 +1,2 @@ +# Decision making un +