:root { color-scheme:light dark; --bg:#f3f1ea; --panel:#ebe8df; --text:#191919; --muted:#68665f; --line:#d5d0c5; --accent:#315c4d; --max:1120px; --article:760px; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; }
@media(prefers-color-scheme:dark) { :root { --bg:#111210; --panel:#191a17; --text:#ecebe5; --muted:#9a9a91; --line:#2b2d28; --accent:#8fb7a1; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:120px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none !important; }
img { display:block; max-width:100%; height:auto; }
button,input,select { font:inherit; color:inherit; }
.shell { width:min(calc(100% - 40px),var(--max)); margin:0 auto; }
.site-header { padding:28px 0 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px); z-index:10; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { font-family:var(--mono); font-size:17px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.cursor { display:inline-block; width:.56em; height:1.05em; background:var(--accent); margin-left:2px; vertical-align:-.14em; animation:blink 1.15s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.menu { display:flex; flex-wrap:wrap; gap:24px; font-size:14px; color:var(--muted); }
.menu [aria-current="page"] { color:var(--accent); text-decoration:underline; text-underline-offset:7px; }
.nav-about { position:relative; display:flex; align-items:center; gap:4px; }
.nav-about.current-branch > a { color:var(--accent); }
.nav-dropdown > summary { cursor:pointer; list-style:none; padding:0 5px; border-radius:3px; line-height:1.6; }
.nav-dropdown > summary::-webkit-details-marker { display:none; }
.nav-dropdown > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.about-submenu { position:absolute; top:100%; right:0; width:310px; max-width:calc(100vw - 32px); padding-top:10px; z-index:30; }
.about-submenu-links { display:flex; flex-direction:column; padding:7px; border:1px solid var(--line); border-radius:10px; background:var(--bg); box-shadow:0 10px 28px #0002; }
.about-submenu a { display:block; padding:9px 12px; white-space:normal; border-radius:5px; }
.about-submenu a:hover,.about-submenu a:focus-visible { background:var(--panel); }
.hero { padding:96px 0 84px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:68px; align-items:start; }
.hero-copy { min-width:0; }
.eyebrow,.meta,.tag,.section-label { font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.eyebrow { color:var(--accent); font-size:13px; margin:0 0 18px; }
h1 { font-size:clamp(46px,7vw,86px); line-height:.98; letter-spacing:-.055em; max-width:920px; margin:0; font-weight:760; overflow-wrap:break-word; }
.hero p { max-width:680px; margin:30px 0 0; font-size:clamp(19px,2vw,24px); line-height:1.5; color:var(--muted); }
.site-map { margin-top:2px; }
.site-map .section-label { margin-bottom:12px; }
.section { border-top:1px solid var(--line); padding:26px 0 72px; }
.section-label { color:var(--muted); font-size:12px; font-weight:400; line-height:1.6; margin:0 0 30px; }
.featured { display:grid; grid-template-columns:170px minmax(0,1fr); gap:34px; padding:28px 0 34px; border-bottom:1px solid var(--line); }
.featured:last-child { border-bottom:0; }
.meta { color:var(--muted); font-size:11px; line-height:1.8; }
.meta span { display:block; }
.post-title { font-size:clamp(28px,3.2vw,45px); line-height:1.08; letter-spacing:-.035em; margin:0 0 14px; font-weight:700; max-width:780px; }
.excerpt { max-width:700px; color:var(--muted); font-size:17px; margin:0 0 20px; }
.tags { display:flex; gap:9px; flex-wrap:wrap; }
.tag { border:1px solid var(--line); border-radius:999px; padding:5px 9px 4px; font-size:10px; color:var(--muted); background:var(--panel); }
.grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:60px; }
.note { padding:18px 0; border-bottom:1px solid var(--line); }
.note a { display:flex; gap:14px; align-items:flex-start; font-size:18px; line-height:1.4; }
.arrow { color:var(--accent); font-family:var(--mono); }
.projects { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:25px; align-self:start; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.project-window { height:100%; display:flex; flex-direction:column; }
.project-window h3 { margin:0 0 14px; font-size:23px; letter-spacing:-.025em; }
.project-window p { color:var(--muted); font-size:15px; margin:0 0 24px; }
.project-window .text-link { margin-top:auto; font-size:14px; }
.timeline-scroll { padding-bottom:10px; }
.computer-chart { width:100%; }
.computer-axis,.computer-row { display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; }
.computer-axis { margin-bottom:10px; color:var(--muted); font:9px/1.3 var(--mono); grid-template-columns:132px repeat(var(--year-count),minmax(0,1fr)); }
.computer-axis > span:first-child { padding-top:3px; }
.computer-axis span:not(:first-child) { text-align:center; writing-mode:vertical-rl; transform:rotate(180deg); }
.computer-row { align-items:center; margin:7px 0 0; }
.computer-row > strong { font:11px/1.3 var(--mono); color:var(--muted); }
.computer-track { display:grid; grid-template-columns:repeat(var(--year-count),minmax(0,1fr)); min-height:48px; }
.computer-bar { grid-column:var(--start)/span var(--span); padding:7px 10px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:7px; background:color-mix(in srgb,var(--accent) 13%,var(--panel)); overflow:hidden; white-space:nowrap; }
.computer-bar b { display:block; overflow:hidden; text-overflow:ellipsis; }
.computer-bar b { font-size:11px; }
.game-points-row { display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; align-items:start; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.game-points-row > strong { color:var(--accent); font:11px/1.4 var(--mono); }
.game-point-track { position:relative; min-height:var(--point-height,430px); border-bottom:1px solid var(--line); }
.game-point { position:absolute; left:var(--x); top:var(--y); transform:translateX(-50%); display:flex; align-items:center; gap:5px; color:var(--muted); font:9px/1.15 var(--mono); white-space:nowrap; }
.game-point i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.game-point:hover { color:var(--accent); }
.game-preview { display:none; position:absolute; z-index:4; top:-10px; left:0; width:260px; height:180px; border:1px solid var(--line); border-radius:10px; background:#111; color:var(--muted); white-space:normal; align-items:center; justify-content:center; flex-direction:column; text-align:center; overflow:hidden; box-shadow:0 16px 35px color-mix(in srgb,var(--text) 14%,transparent); }
.game-preview img { width:100%; height:100%; display:block; object-fit:contain; }
.game-preview-missing { padding:16px; background:var(--panel); }
.game-preview small { font:9px/1.4 var(--mono); }
.game-point:hover .game-preview,.game-point:focus-visible .game-preview { display:flex; }
.game-point.edge-start { transform:none; }
.game-point.edge-start .game-preview { left:0; }
.game-point.edge-end .game-preview { left:auto; right:0; }
.operating-systems { display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; align-items:start; margin-top:18px; padding-top:16px; }
.operating-systems > strong { color:var(--muted); font:11px/1.4 var(--mono); }
.os-track { display:grid; grid-template-columns:repeat(var(--year-count),minmax(0,1fr)); grid-template-rows:repeat(5,20px); min-height:100px; align-items:center; }
.os-item { grid-column:var(--start)/span var(--span); grid-row:calc(var(--lane) + 1); display:block; min-width:0; box-sizing:border-box; padding:5px 7px; border:1px solid transparent; border-radius:7px; color:#fff; font:9px/1.2 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-spectrum { background:#3f4650; border-color:#20252c; }
.os-c64 { background:#315a96; border-color:#234271; }
.os-dos { background:#111; border-color:#333; color:#fff; }
.os-windows { background:#0876bb; border-color:#055985; }
.os-redhat { background:#b3261e; border-color:#861b16; }
.os-mandrake { background:#4c3f92; border-color:#352b69; }
.os-debian { background:#a52b55; border-color:#79203d; }
.os-ubuntu { background:#a64b22; border-color:#783617; }
.work-hint { color:var(--muted); font-size:13px; max-width:760px; }
.work-scroll { padding:20px 0; }
.work-chart { min-width:860px; padding:0 8px; }
.work-axis,.work-companies { display:grid; grid-template-columns:repeat(var(--work-years),minmax(0,1fr)); }
.work-axis { font:10px var(--mono); color:var(--muted); text-align:center; margin-bottom:16px; }
.work-companies { grid-auto-rows:minmax(34px,auto); row-gap:7px; }
.work-company { display:flex; align-items:center; gap:8px; min-width:0; border:1px solid #ffffff30; background:var(--company-color,#505b61); color:#fff; border-radius:8px; padding:8px; font:11px/1.4 var(--mono); }
.work-company-label { min-width:0; overflow-wrap:normal; }
.work-company { position:relative; }
.work-company-link { display:flex; align-items:center; gap:8px; width:100%; min-height:24px; color:inherit; background:none; border:0; padding:0; font:inherit; text-align:left; cursor:pointer; }
.work-company-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.work-company:hover,.work-company:focus-within { z-index:20; }
.work-company:hover .work-preview,.work-company:focus-within .work-preview { display:block; }
.work-company-right .work-preview { left:auto; right:0; }
.work-preview-project { display:flex; flex-direction:column; gap:8px; color:var(--text); padding:8px 0; }
.work-preview-project + .work-preview-project { border-top:1px solid var(--line); margin-top:10px; }
.work-preview-dates { margin:0 0 8px; color:var(--muted); font:11px var(--mono); }
.brand-novi .work-company-link > img,.brand-novi-cto .work-company-link > img { width:60px; height:28px; flex-basis:60px; background:#fff; border-radius:4px; }
.work-company img { width:24px; height:24px; flex:0 0 24px; object-fit:contain; }
.work-company-short { position:relative; min-height:42px; }
.work-company-short .work-company-label { position:absolute; right:100%; margin-right:10px; white-space:nowrap; color:var(--text); }
.work-company-label-right .work-company-label { right:auto; left:100%; margin-left:10px; margin-right:0; }
.segment-first { border-radius:8px 0 0 8px; border-right:0; }
.segment-last { border-radius:0 8px 8px 0; }
.brand-novi { --company-color:#b8e3f5; color:#153e55; }
.brand-novi-cto { --company-color:#91cee9; color:#153e55; }
.brand-ovis { --company-color:#087bbd; }
.brand-k3 { --company-color:#8b286c; }
.brand-ovis img,.brand-k3 img { width:58px; height:32px; flex-basis:58px; background:#fff; border-radius:4px; padding:2px; }
.brand-enea { --company-color:#172a53; }
.brand-protenus { --company-color:#24523f; }
.brand-nth { --company-color:#b8e3f5; color:#153e55; }
.brand-nth .work-company-link > img { width:100%; height:28px; flex:1 1 auto; min-width:0; object-fit:contain; }
.brand-mev { --company-color:#243d60; min-height:72px; }
.brand-mev .work-company-label { white-space:normal; width:clamp(170px,calc(4 * (100vw - 176px) / var(--work-years)),300px); text-align:right; }
.brand-augment { --company-color:#171717; }
.brand-augment img { background:white; border-radius:4px; }
.work-preview { display:none; position:absolute; top:100%; left:0; width:290px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); box-shadow:0 12px 30px #0002; font:14px/1.5 var(--sans, sans-serif); }
.work-preview img,.work-preview .work-image-placeholder { width:100%; height:130px; object-fit:contain; margin-bottom:10px; }
.work-preview { max-height:440px; overflow-y:auto; }
@media (max-width:900px) { .work-scroll { overflow-x:auto; } .work-scroll:focus-within,.work-scroll:hover { padding-bottom:450px; margin-bottom:-430px; } }
.work-image-placeholder { display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 8%,var(--panel)); color:var(--muted); font:11px var(--mono); border-radius:8px; }
#work-timeline { scroll-margin-top:110px; }
.project { padding:13px 0 17px; border-bottom:1px solid var(--line); }
.page-heading.tech-heading { padding:28px 0 22px; }
.page-heading.tech-heading h1 { font-size:clamp(38px,5vw,56px); }
.tech-heading .lead { max-width:920px; font-size:18px; margin:18px 0 0; }
.tech-controls { border-top:1px solid var(--line); padding:18px 0 22px; }
.tech-search-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.tech-search-row label { display:grid; gap:8px; width:min(100%,370px); font:11px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.tech-search-row input { width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font:15px/1.4 var(--mono); letter-spacing:normal; }
#tech-results { margin:0 0 12px; color:var(--muted); font:11px/1.5 var(--mono); white-space:nowrap; }
.tech-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tech-filters button,.tech-empty button { background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 12px; font:12px/1.5 var(--mono); cursor:pointer; }
.tech-filters button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.tech-filters button:hover { border-color:var(--accent); }
.tech-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
.tech-group { min-width:0; border-top:1px solid var(--line); padding:26px 0 32px; }
.tech-group-heading { display:flex; align-items:baseline; gap:14px; }
.tech-group-heading > span { font:11px var(--mono); color:var(--accent); }
.tech-group-heading h2 { margin:0; font-size:18px; font-weight:550; letter-spacing:-.02em; }
.tech-caption { margin:8px 0 22px; color:var(--muted); font-size:13px; }
.tech-cloud { list-style:none; margin:0; padding:8px 4px; display:flex; flex-wrap:wrap; align-items:baseline; align-content:center; justify-content:center; gap:12px 22px; min-height:135px; }
.tech-word { line-height:1.25; overflow-wrap:anywhere; max-width:100%; }
.tech-word-small { color:var(--muted); font:14px/1.4 var(--mono); }
.tech-word-medium { color:var(--accent); font-size:24px; font-weight:500; letter-spacing:-.025em; }
.tech-word-large { font-size:clamp(30px,3.1vw,42px); font-weight:650; letter-spacing:-.045em; }
.tech-footer { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:24px 0; border-top:1px solid var(--line); }
.tech-footer p { max-width:620px; margin:0; color:var(--muted); font-size:13px; }
.tech-footer .text-link { margin:0; font-size:13px; }
.tech-empty { padding:42px 0; text-align:center; border-top:1px solid var(--line); }
@media (max-width:700px) { .tech-groups { grid-template-columns:1fr; } .tech-search-row { align-items:stretch; flex-direction:column; gap:14px; } .tech-search-row label { width:100%; } .tech-cloud { min-height:100px; gap:12px 18px; } #tech-results { margin:0; } }
.project:last-child { border-bottom:0; padding-bottom:0; }
.project strong { display:block; font-size:17px; margin-bottom:3px; }
.project span { color:var(--muted); font-size:14px; }
.about-intro { max-width:var(--article); font-size:19px; }
.about-intro p { margin:0 0 20px; }
.text-link,.back,.back-top { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.text-link { display:inline-block; margin-top:20px; }
.site-footer { margin-top:30px; border-top:1px solid var(--line); padding:34px 0 52px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:13px; }
.footer-links { display:flex; flex-wrap:wrap; gap:20px; }
.terminal { font-family:var(--mono); font-size:12px; }
.skip { position:fixed; top:-100px; left:20px; padding:12px 18px; background:var(--panel); z-index:20; }
.skip:focus { top:10px; }
.site-tagline { margin:0; padding:9px 20px; background:var(--panel); border-bottom:1px solid var(--line); color:var(--muted); text-align:center; font:11px/1.5 var(--mono); }
.page-heading { padding:80px 0 64px; max-width:920px; }
.page-heading.work-heading { padding:28px 0 24px; }
.page-heading h1,.prose h1 { font-size:clamp(40px,5.5vw,66px); line-height:1.06; }
.lead { font-size:clamp(19px,2vw,24px); line-height:1.5; color:var(--muted); }
.chapter-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 36px; }
.chapter-index a { display:flex; gap:20px; border-bottom:1px solid var(--line); padding:16px 0; }
.chapter-index span { color:var(--accent); font:12px/1.8 var(--mono); }
.chapter-index strong { font-size:16px; font-weight:500; }
.chapter { border-top:1px solid var(--line); padding:60px 0; }
.chapter.with-photo { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); gap:64px; align-items:start; }
.chapter-copy { max-width:var(--article); }
.chapter h2,.prose h2 { font-size:clamp(27px,3.2vw,38px); line-height:1.16; letter-spacing:-.03em; margin:0 0 25px; }
.chapter p,.prose p,.prose li { font-size:18px; }
.chapter .eyebrow,.prose .eyebrow { font-size:12px; }
.back-top { display:block; margin-top:28px; font-size:13px; }
.photo { margin:0; }
.photo img { border-radius:12px; }
.photo figcaption { color:var(--muted); font-size:12px; padding:12px 0; }
.placeholder > div { background:var(--panel); border:1px dashed var(--line); border-radius:12px; min-height:240px; padding:35px; display:flex; flex-direction:column; justify-content:center; color:var(--muted); font:12px/1.6 var(--mono); }
.photo-symbol { font-size:26px; color:var(--accent); margin-bottom:16px; }
.editorial-note { padding:18px 22px; border-left:2px solid var(--accent); background:var(--panel); color:var(--muted); font-size:14px; }
.archive-controls { display:flex; gap:24px; align-items:end; flex-wrap:wrap; padding:28px 0; }
.archive-controls label { display:grid; gap:8px; font:12px/1.6 var(--mono); color:var(--muted); }
.archive-controls label:first-child { flex:1; min-width:180px; }
input,select { border:1px solid var(--line); background:var(--panel); padding:12px; border-radius:6px; width:100%; min-height:46px; }
#result-count { color:var(--muted); font-size:13px; }
.year-heading { font-size:25px; letter-spacing:-.03em; margin:40px 0 16px; }
.year-heading span { font-size:14px; color:var(--muted); font-weight:400; }
.file-row { display:grid; grid-template-columns:125px minmax(0,1fr) auto 18px; gap:24px; border-bottom:1px solid var(--line); padding:24px 0; align-items:start; }
.file-date { font:12px/1.7 var(--mono); color:var(--muted); }
.file-date small { display:block; font-size:10px; }
.file-text strong { display:block; font-size:21px; line-height:1.3; letter-spacing:-.02em; }
.file-text > span { display:block; color:var(--muted); margin-top:9px; font-size:15px; }
.file-tag { color:var(--muted); font:10px/1.5 var(--mono); text-transform:uppercase; border:1px solid var(--line); padding:5px 9px; border-radius:999px; }
.file-arrow { color:var(--accent); }
.reading-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:60px; padding:70px 0; }
.reading-nav { display:flex; flex-direction:column; gap:16px; align-self:start; position:sticky; top:130px; font-size:14px; }
.reading-nav span { color:var(--muted); font-size:13px; }
.prose { max-width:var(--article); min-width:0; overflow-wrap:break-word; }
.prose.standalone { margin:0 auto; padding:80px 0; }
.prose h1 { margin:0 0 30px; }
.prose h2 { margin-top:52px; }
.prose h3 { font-size:23px; margin-top:35px; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.prose .back { display:inline-block; margin-bottom:32px; font-size:14px; }
.prose blockquote { border-left:2px solid var(--accent); padding-left:24px; margin:30px 0; color:var(--muted); }
.prose pre { overflow:auto; padding:20px; background:var(--panel); }
.prose code { font-family:var(--mono); font-size:.88em; }
.prose table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; }
.prose td,.prose th { border-bottom:1px solid var(--line); padding:12px; text-align:left; }
.button { display:inline-block; border:1px solid var(--line); border-radius:6px; padding:12px 18px; color:var(--accent); }
.empty { color:var(--muted); padding:24px 0; }
@media(max-width:760px) {
  .shell { width:min(calc(100% - 28px),var(--max)); }
  .site-header { padding:20px 0 14px; }
  .nav { gap:16px; align-items:flex-start; }
  .menu { gap:10px 14px; font-size:13px; justify-content:flex-end; }
  .hero { padding:66px 0 58px; grid-template-columns:1fr; gap:48px; }
  .timeline-scroll { overflow-x:auto; }
  .computer-chart { min-width:960px; }
  .featured { grid-template-columns:1fr; gap:10px; }
  .grid,.project-grid,.chapter.with-photo,.reading-layout { grid-template-columns:1fr; gap:22px; }
  .chapter-index { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; }
  .page-heading,.prose.standalone { padding:55px 0; }
  .reading-nav { position:static; }
  .file-row { grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; }
  .file-date { grid-column:1 / -1; }
  .file-date small { display:inline; margin-left:12px; }
  .file-text { grid-column:1 / -1; }
  .file-arrow { text-align:right; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cursor { animation:none; } }