:root {
  --paper: #f6f9fe;
  --paper-alt: #edf3fc;
  --ink: #142a43;
  --muted: #50677e;
  --rule: #ccdae9;
  --accent: #276fd0;
  --accent-strong: #1859b5;
  --panel-note: #d9eaff;
  --panel-blue: #d4e7fa;
  --panel-teal: #d5eef5;
  --chrome: #c7ddf9;
  --card: #ffffff;
  --window: #f5faff;
  --shadow: #16345122;
  --focus: #2b70d8;
  --underline: #b3d8fb;
  --ribbon: #255dab;
}
html[data-theme="dark"] {
  --paper: #0f1724;
  --paper-alt: #152337;
  --ink: #edf4ff;
  --muted: #b4c4d8;
  --rule: #35465c;
  --accent: #589ffb;
  --accent-strong: #a1cfff;
  --panel-note: #203b57;
  --panel-blue: #254762;
  --panel-teal: #1d4153;
  --chrome: #264560;
  --card: #1a2a3d;
  --window: #192b41;
  --shadow: #03091366;
  --focus: #a7d3ff;
  --underline: #326da7;
  --ribbon: #245493;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 16px; line-height: 1.6; transition: background .2s ease, color .2s ease; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
button { cursor: pointer; }
::selection { color: var(--ink); background: var(--panel-teal); }
.layout { width: min(1100px, calc(100% - 72px)); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:200; left:16px; top:-100px; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:6px; }
.skip-link:focus { top:12px; }
.page-wrap { min-height:100vh; overflow:clip; }
.site-header { border-bottom:1px dashed var(--rule); position:relative; z-index:20; background:var(--paper); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:81px; }
.wordmark { font-weight:900; font-size:21px; white-space:nowrap; letter-spacing:-1.1px; line-height:1.2; }
.mark-star { color:var(--accent); font-size:29px; display:inline-block; margin-right:5px; vertical-align:-2px; transition:transform .4s ease; }
.wordmark:hover .mark-star { transform:rotate(65deg); }
.wordmark-dot { color:var(--accent); }
.desktop-nav { display:flex; gap:30px; font-size:14px; font-weight:700; }
.desktop-nav a, .plain-link, .site-footer a { text-decoration-thickness:2px; text-underline-offset:4px; }
.desktop-nav a:hover, .plain-link:hover, .site-footer a:hover { color:var(--accent-strong); text-decoration:underline; }
.header-buttons { display:flex; gap:8px; align-items:center; }
.theme-button { background:transparent; border:1.5px solid var(--ink); border-radius:100px; color:var(--ink); padding:6px 13px; font-size:12px; font-weight:700; display:flex; gap:8px; align-items:center; white-space:nowrap; }
.theme-button:hover { background:var(--ink); color:var(--paper); }
.theme-glyph { font-size:17px; line-height:1; }
.menu-button { display:none; border:1.5px solid var(--ink); background:transparent; border-radius:7px; width:42px; height:37px; padding:9px; flex-direction:column; justify-content:space-around; }
.menu-button>span:not(.sr-only) { display:block; background:var(--ink); height:2px; width:100%; }
.mobile-nav[hidden] { display:none!important; }
.mobile-nav { border-top:1px dashed var(--rule); padding-top:10px; padding-bottom:18px; }
.mobile-nav a { display:flex; justify-content:space-between; padding:11px 2px; font-weight:700; border-bottom:1px solid var(--rule); }
.hero { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr); align-items:center; gap:60px; min-height:650px; padding-top:72px; padding-bottom:104px; }
.tiny-label, .section-topline, .box-kicker { color:var(--muted); font-family:Consolas,"Courier New",monospace; font-weight:700; font-size:12px; letter-spacing:.2px; }
.tiny-spark { color:var(--accent); font-size:19px; vertical-align:-2px; padding-right:7px; }
.hero h1 { margin:25px 0 12px; font-weight:900; font-size:clamp(68px,8.3vw,112px); letter-spacing:-7px; line-height:1.04; }
.name-doodle { position:relative; white-space:nowrap; color:var(--accent-strong); }
.period { color:var(--ink); }
.underline { position:absolute; color:var(--underline); height:18px; width:100%; bottom:-16px; left:0; z-index:-1; }
.hero-lead { max-width:560px; margin:40px 0 16px; font-weight:800; font-size:clamp(23px,2.7vw,30px); line-height:1.35; letter-spacing:-.7px; }
.hero-description { margin:0; max-width:540px; font-size:16px; line-height:1.82; color:var(--muted); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; margin-top:30px; font-size:14px; font-weight:800; }
.primary-link { background:var(--accent); color:#fff; padding:13px 18px; display:inline-flex; align-items:center; gap:25px; box-shadow:4px 4px 0 var(--ink); border-radius:5px; transition:transform .15s,box-shadow .15s; }
html[data-theme="dark"] .primary-link { color:#0c213b; }
.primary-link:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.little-footnote { color:var(--muted); font-family:Consolas,"Courier New",monospace; font-size:11px; margin-top:36px; }
.little-footnote span { color:var(--accent); font-weight:900; font-size:17px; }
.hero-illustration { position:relative; min-width:0; padding:35px 19px 40px 5px; }
.desktop-window { background:var(--window); border:2px solid var(--ink); border-radius:10px; box-shadow:12px 14px 0 var(--shadow); transform:rotate(2deg); overflow:hidden; }
.window-chrome { height:39px; background:var(--chrome); border-bottom:2px solid var(--ink); display:flex; gap:14px; align-items:center; padding:0 13px; font-size:12px; font-family:Consolas,"Courier New",monospace; font-weight:700; }
.window-lights { display:flex; gap:5px; }
.window-lights i { display:block; width:9px; height:9px; border:1.5px solid var(--ink); border-radius:50%; }
.window-lights i:nth-child(1) { background:#f68c80; }
.window-lights i:nth-child(2) { background:#ffe097; }
.window-lights i:nth-child(3) { background:#98caa4; }
.window-chrome-end { margin-left:auto; font-size:18px; opacity:.65; }
.window-inner { padding:40px 35px 28px; }
.ascii-icon { height:70px; width:70px; display:grid; place-items:center; border:2px solid var(--ink); background:var(--panel-note); border-radius:14px; transform:rotate(-7deg); box-shadow:5px 5px 0 var(--shadow); }
.ascii-icon span { font-size:49px; line-height:1; font-family:Arial,sans-serif; font-weight:700; }
.window-heading { margin:26px 0 8px; font-weight:900; font-size:23px; letter-spacing:-.7px; line-height:1.2; }
.window-heading span { color:var(--accent-strong); }
.window-copy { margin:0 0 17px; font-size:14px; color:var(--muted); }
.window-checklist { margin:0; padding:0; display:grid; gap:8px; list-style:none; font-weight:700; font-size:14px; }
.window-checklist span { color:var(--accent-strong); margin-right:8px; }
.sticker { position:absolute; z-index:3; font-family:Consolas,"Courier New",monospace; text-align:center; font-size:12px; line-height:1.4; }
.sticker-top { background:var(--panel-teal); border:1.5px solid var(--ink); color:var(--ink); transform:rotate(-9deg); padding:12px 16px; top:0; right:-8px; box-shadow:3px 4px 0 var(--shadow); }
.sticker strong { letter-spacing:7px; color:var(--accent-strong); }
.mini-note { position:absolute; bottom:0; left:-30px; z-index:3; width:150px; height:105px; display:flex; justify-content:center; flex-direction:column; align-items:center; background:var(--panel-note); color:var(--ink); border:1.5px solid var(--ink); box-shadow:5px 5px 0 var(--shadow); transform:rotate(-8deg); font-size:17px; line-height:1.4; font-weight:900; text-align:center; }
.mini-note-pin { position:absolute; top:-17px; font-size:23px; color:var(--accent-strong); }
.scribble-arrow { position:absolute; bottom:10px; right:-25px; transform:rotate(25deg); font-size:60px; color:var(--accent); font-family:Georgia,serif; }
.divider-strip { background:var(--ribbon); color:#fff; transform:rotate(-1deg) scale(1.015); margin-top:-15px; }
.divider-strip>.layout { min-height:44px; display:flex; justify-content:space-between; align-items:center; gap:18px; font-size:13px; font-family:Consolas,"Courier New",monospace; font-weight:700; }
.divider-strip span { font-size:22px; }
.things-section { padding-top:116px; padding-bottom:117px; }
.section-topline { display:flex; align-items:baseline; gap:8px; }
.section-topline p { margin:0; }
.section-number { color:var(--accent-strong); }
.section-intro { display:flex; align-items:end; justify-content:space-between; gap:30px; margin:14px 0 37px; }
.section-intro h2, .work-heading h2 { margin:0; font-size:clamp(46px,5.5vw,70px); line-height:1.08; font-weight:900; letter-spacing:-3.7px; }
.section-intro h2 em, .contact-inner h2 em { font-style:normal; color:var(--accent-strong); }
.heading-dot { color:var(--panel-blue); }
.section-intro>p { max-width:280px; color:var(--muted); margin:0 0 5px; font-size:14px; }
.things-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.thing-card { position:relative; border:1.5px solid var(--ink); border-radius:9px; padding:19px 20px 27px; background:var(--card); box-shadow:5px 6px 0 var(--shadow); transition:transform .18s ease; }
.thing-card:hover { transform:translateY(-5px) rotate(-.5deg); }
.thing-network { background:var(--panel-blue); }
.thing-hardware { background:var(--panel-teal); }
.thing-linux { background:var(--chrome); }
.thing-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:Consolas,"Courier New",monospace; font-size:11px; color:var(--ink); }
.hand-label { background:var(--card); color:var(--ink); padding:4px 9px; border:1px solid var(--ink); border-radius:50px; transform:rotate(-2deg); }
.number-corner { font-size:13px; font-weight:900; }
.thing-illustration { height:190px; display:flex; align-items:center; justify-content:center; position:relative; }
.computer-illustration { flex-direction:column; padding-top:18px; }
.screen { width:150px; height:109px; border:8px solid var(--ink); border-radius:8px; background:#182f4c; box-shadow:7px 5px 0 #0002; display:flex; align-items:center; justify-content:center; transform:rotate(-4deg); }
.screen-text { color:#add6ff; display:flex; flex-direction:column; font-family:Consolas,"Courier New",monospace; gap:7px; font-size:10px; }
.screen-stand { width:14px; height:25px; background:var(--ink); transform:rotate(-4deg); }
.screen-base { width:100px; height:10px; background:var(--ink); border-radius:50%; transform:rotate(-4deg); }
.little-spark { position:absolute; font-size:39px; right:50px; top:16px; color:var(--accent-strong); }
.folder-illustration { isolation:isolate; }
.folder-back { position:absolute; width:147px; height:103px; transform:rotate(9deg); background:var(--panel-blue); border:2px solid var(--ink); border-radius:5px; }
.folder-back:before { content:""; position:absolute; left:-2px; top:-18px; height:18px; width:68px; background:var(--panel-blue); border:2px solid var(--ink); border-radius:5px 5px 0 0; }
.folder-front { position:relative; z-index:2; width:154px; height:106px; border:2px solid var(--ink); background:var(--panel-note); border-radius:6px; transform:rotate(-8deg); display:flex; justify-content:center; align-items:center; font-family:Consolas,"Courier New",monospace; font-size:51px; font-weight:900; color:var(--ink); }
.folder-stars { position:absolute; right:-19px; top:-36px; font-size:35px; color:var(--accent-strong); }
.thing-card h3 { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:25px; letter-spacing:-.8px; margin:0 0 8px; line-height:1.3; color:var(--ink); }
.idea-badge { font-family:Consolas,"Courier New",monospace; font-weight:600; font-size:11px; background:var(--card); color:var(--ink); border:1px solid var(--ink); border-radius:50px; padding:2px 8px; letter-spacing:0; }
.thing-card p { margin:0; font-size:13px; line-height:1.75; color:var(--ink); }
.below-cards { color:var(--muted); margin:24px 0 0; font-family:Consolas,"Courier New",monospace; font-size:12px; }
.below-cards span { color:var(--accent-strong); font-size:19px; vertical-align:-2px; }
.work-section { background:var(--paper-alt); border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule); }
.work-layout { display:grid; grid-template-columns:minmax(260px,.87fr) minmax(0,1.13fr); gap:90px; padding-block:114px 112px; }
.work-heading h2 { margin-top:25px; font-size:clamp(43px,4.7vw,62px); }
.work-heading>p { max-width:275px; color:var(--muted); font-size:15px; margin:19px 0 0; }
.work-aside { margin-top:68px; border:1px dashed var(--accent); border-radius:12px; padding:20px; max-width:290px; font-size:13px; line-height:1.6; color:var(--muted); transform:rotate(-3deg); }
.work-aside span { display:block; font-size:35px; line-height:1.4; color:var(--accent-strong); }
.work-entry { border-top:1.5px solid var(--ink); padding:22px 0 35px; }
.work-meta { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.work-current { font-family:Consolas,"Courier New",monospace; font-size:10px; line-height:1.3; font-weight:800; border:1px solid var(--accent-strong); color:var(--accent-strong); padding:3px 7px; border-radius:5px; display:inline-block; white-space:nowrap; }
.work-meta .work-date { margin-bottom:10px!important; }
.work-date { font-size:11px!important; font-family:Consolas,"Courier New",monospace; color:var(--accent-strong)!important; text-transform:uppercase; letter-spacing:1px; font-weight:800; margin:0 0 10px!important; }
.work-entry h3 { font-size:26px; letter-spacing:-.7px; line-height:1.2; margin:0 0 5px; }
.work-place { color:var(--muted)!important; margin:0 0 16px!important; font-size:12px!important; font-weight:700; }
.work-entry>p:not(.work-date):not(.work-place) { color:var(--ink); font-size:14px; line-height:1.8; margin:0 0 16px; }
.tool-line { border-left:3px solid var(--accent); padding-left:11px; font-size:12px; line-height:1.8; color:var(--muted); }
.tool-line span { color:var(--ink); font-weight:800; }
 .other-work-list { border-top:1.5px solid var(--ink); padding-top:22px; }
.other-work-list>h3 { font-size:17px; line-height:1.3; margin:0 0 14px; }
.other-job { padding:18px 0; border-top:1px dashed var(--rule); }
.other-job h4 { margin:6px 0 3px; font-size:17px; line-height:1.4; }
.other-date { margin:0; color:var(--accent-strong); font-family:Consolas,"Courier New",monospace; font-size:11px; font-weight:800; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.other-place { color:var(--muted); margin:0!important; font-size:12px; font-weight:700; }
.other-job>p { margin:10px 0 0; font-size:13px; line-height:1.7; color:var(--ink); }
.about-bottom { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:22px; padding-block:115px; }
.education-box { position:relative; background:var(--panel-note); color:var(--ink); border:1.5px solid var(--ink); border-radius:7px; padding:40px 43px 44px; }
.corner-stamp { position:absolute; top:14px; right:20px; font-size:38px; color:var(--accent-strong); }
.box-kicker { color:var(--muted); margin:0 0 19px; }
.education-box h2 { font-size:clamp(28px,3.4vw,42px); line-height:1.2; letter-spacing:-1.7px; margin:0 0 20px; }
.education-box>p:last-child { max-width:470px; color:var(--muted); font-size:14px; margin:0; line-height:1.85; }
.education-box strong { color:var(--ink); }
.skills-box { display:flex; flex-direction:column; justify-content:center; padding:28px 28px 28px 41px; }
.skill-line { font-size:clamp(19px,2.2vw,27px); font-weight:900; line-height:1.7; letter-spacing:-.7px; margin:0; }
.skill-line span { color:var(--accent-strong); font-size:17px; margin:0 4px; }
.skills-caption { color:var(--muted); font-size:12px; margin:22px 0 0; }
.contact-section { background:var(--panel-teal); color:var(--ink); border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); }
.contact-inner { display:flex; align-items:center; justify-content:space-between; gap:35px; padding-block:65px 70px; }
.contact-small { font-family:Consolas,"Courier New",monospace; font-size:12px; font-weight:800; }
.contact-inner h2 { font-size:clamp(65px,8vw,106px); line-height:1.05; margin:10px 0; letter-spacing:-5px; }
.contact-inner h2 em { color:var(--accent-strong); }
.contact-inner p { font-size:14px; color:var(--muted); margin:0; }
.contact-link { background:var(--card); display:flex; justify-content:space-between; align-items:center; gap:22px; padding:14px 18px; border:1.5px solid var(--ink); border-radius:6px; min-width:215px; box-shadow:4px 4px 0 var(--ink); font-size:13px; font-weight:900; transition:transform .15s,box-shadow .15s; }
.contact-link:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.site-footer { font-size:12px; color:var(--muted); }
.footer-inner { min-height:84px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-block:22px; }
@media(max-width:980px) {
  .desktop-nav { gap:17px; }
  .layout { width:min(100% - 50px,1100px); }
  .hero { grid-template-columns:1fr 1fr; gap:35px; }
  .hero h1 { font-size:clamp(59px,8.2vw,84px); letter-spacing:-5px; }
  .window-inner { padding:31px 23px 25px; }
  .work-layout { gap:45px; }
  .things-grid { gap:12px; }
  .thing-card { padding:17px 15px 23px; }
  .thing-card h3 { font-size:22px; }
}
@media(max-width:740px) {
  html { scroll-padding-top:70px; }
  .layout { width:min(100% - 38px,1100px); }
  .header-inner { min-height:69px; }
  .wordmark { font-size:19px; }
  .mark-star { font-size:24px; }
  .desktop-nav { display:none; }
  .theme-text { display:none; }
  .theme-button { height:37px; width:37px; padding:0; display:grid; place-items:center; }
  .menu-button { display:flex; }
  .hero { grid-template-columns:1fr; padding-top:57px; padding-bottom:88px; gap:40px; }
  .hero h1 { font-size:clamp(68px,12vw,96px); }
  .hero-lead { margin-top:35px; }
  .hero-description { font-size:15px; }
  .hero-illustration { width:min(440px,100% - 24px); justify-self:center; }
  .sticker-top { right:-12px; }
  .divider-strip>.layout { min-height:39px; font-size:11px; }
  .things-section { padding-top:92px; padding-bottom:92px; }
  .section-intro { display:block; }
  .section-intro>p { margin-top:15px; max-width:480px; }
  .things-grid { grid-template-columns:1fr; gap:23px; }
  .thing-card { padding:20px 23px 24px; }
  .thing-illustration { height:165px; }
  .thing-card h3 { font-size:26px; }
  .thing-card p { font-size:14px; }
  .work-layout { grid-template-columns:1fr; gap:45px; padding-block:86px; }
  .work-heading h2 { max-width:500px; }
  .work-heading>p { max-width:450px; }
  .work-aside { display:none; }
  .about-bottom { grid-template-columns:1fr; padding-block:85px; }
  .skills-box { padding:28px 8px 0; }
  .contact-inner { flex-direction:column; align-items:stretch; padding-block:61px; gap:30px; }
  .contact-link { width:fit-content; }
  .contact-inner h2 { font-size:72px; }
}
@media(max-width:375px) {
  .layout { width:min(100% - 30px,1100px); }
  .hero h1 { font-size:62px; letter-spacing:-4px; }
  .hero-illustration { width:min(100% - 20px,390px); }
  .mini-note { left:-14px; bottom:-9px; width:119px; height:87px; font-size:14px; }
  .sticker-top { top:4px; right:-12px; padding:9px; }
  .window-inner { padding:25px 19px; }
  .window-heading { font-size:19px; }
  .window-copy { font-size:13px; }
  .window-checklist { font-size:13px; }
  .contact-inner h2 { font-size:63px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.network-illustration { isolation:isolate; }
.network-device { width:177px; height:108px; padding:13px 15px; background:var(--window); color:var(--ink); border:3px solid var(--ink); border-radius:8px; box-shadow:7px 8px 0 var(--shadow); transform:rotate(5deg); font-family:Consolas,"Courier New",monospace; position:relative; }
.network-device-label { display:block; font-size:12px; font-weight:900; letter-spacing:1px; }
.network-device-lights { display:flex; gap:8px; margin-top:14px; }
.network-device-lights i { height:11px; width:11px; border:1.5px solid var(--ink); border-radius:50%; background:#a2c9ad; }
.network-device-lights i:nth-child(2) { background:#ffdc8b; }
.network-device-lights i:nth-child(3) { background:#e7a5b6; }
.network-device-line { position:absolute; bottom:10px; right:13px; font-size:10px; }
.network-symbol { position:absolute; color:var(--accent-strong); font-weight:900; font-size:40px; }
.network-symbol-a { left:24px; top:6px; transform:rotate(-17deg); }
.network-symbol-b { right:23px; bottom:3px; }
@media(max-width:740px) { .work-layout { padding-block:80px; } }

.small-project { display:flex; justify-content:space-between; align-items:center; gap:35px; margin-top:46px; border:1.5px dashed var(--rule); border-radius:10px; padding:25px 27px; background:var(--paper-alt); }
.small-project .tiny-label { margin:0 0 6px; }
.small-project .tiny-spark { font-size:14px; }
.small-project h3 { font-size:25px; font-weight:900; margin:0 0 4px; letter-spacing:-.65px; }
.small-project p:last-child { margin:0; font-size:13px; line-height:1.7; color:var(--muted); max-width:520px; }
.small-project-link { white-space:nowrap; color:var(--accent-strong); font-size:13px; font-weight:900; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:740px) { .small-project { align-items:flex-start; flex-direction:column; gap:14px; padding:21px; } }