
:root{color-scheme:dark;--bg:#101116;--surface:#18191f;--line:#2b2d36;--green:#84bc9b;--text:#f0eff4;--muted:#a2a2b1;--mono:'IBM Plex Mono',monospace;--sans:'Manrope',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}body:before{content:'';position:absolute;inset:0 0 auto;height:810px;pointer-events:none;background:radial-gradient(ellipse at 78% 32%,#77e55309,transparent 53%);z-index:-1}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:6px}::selection{background:var(--green);color:var(--bg)}.shell{max-width:1256px;margin:auto;padding:0 48px}.green{color:var(--green)}.header{min-height:106px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:600 24px var(--mono);letter-spacing:-1.2px}.header nav{display:flex;gap:32px;align-items:center;font:12px var(--mono);color:var(--muted)}nav .active,nav a:hover{color:var(--green)}nav .active:before{content:'[';margin-right:7px}nav .active:after{content:']';margin-left:7px}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:70px;padding:86px 0 78px}.eyebrow{font:12px/1.8 var(--mono);letter-spacing:1.5px;color:var(--muted);margin:0 0 24px}.status-dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:9px;box-shadow:0 0 12px #a4f84645;vertical-align:middle}h1{font-size:clamp(52px,5.6vw,76px);line-height:1.09;letter-spacing:-4px;margin:0 0 26px;font-weight:800}.lede{font-size:17px;line-height:1.8;max-width:440px;color:#c4cdc6;margin:0 0 10px}.sublede{font-size:13px;line-height:1.85;color:var(--muted);max-width:420px;margin:0}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:32px}.button{display:inline-flex;align-items:center;gap:24px;background:var(--green);color:#12200e;padding:15px 19px;font:500 12px var(--mono);border:1px solid var(--green);transition:background .2s}.button:hover{background:#c2ff99}.text-link{font:12px/1.6 var(--mono);color:var(--text);display:inline-flex;gap:20px;align-items:center}.text-link:hover{color:var(--green)}.cursor{display:inline-block;background:var(--green);width:7px;height:13px;vertical-align:middle;animation:blink 1.4s steps(1) infinite}.topic-strip{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:12px var(--mono);color:#acb9af}.topic-strip span:first-child{color:var(--green);font-size:12px;letter-spacing:1px}.research{padding:74px 0 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.section-heading .eyebrow,.closing .eyebrow{margin-bottom:12px}h2{font-size:29px;line-height:1.4;letter-spacing:-1.2px;margin:0;font-weight:600}.section-heading>.text-link{white-space:nowrap;margin-bottom:6px}.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:27px}.filters[hidden]{display:none}.filters button{cursor:pointer;border:1px solid var(--line);color:var(--muted);background:transparent;padding:9px 13px;font:12px var(--mono)}.filters button[aria-pressed=true]{color:var(--green);border-color:#66884e;background:#a4f86a0a}.filters button:hover{border-color:var(--green)}.filters button span{margin-left:12px;opacity:.7}.post-row{position:relative;display:grid;grid-template-columns:40px 1fr 36px;gap:18px;padding:29px 12px 29px 0;border-top:1px solid var(--line);transition:background .2s}.post-row[hidden]{display:none}.post-row:hover{background:#a4f86a04}.post-number{font:12px var(--mono);color:#7e9081;padding-top:4px}.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:12px/1.6 var(--mono);color:var(--muted);margin-bottom:11px}.post-meta>span:first-child{color:var(--green)}.meta-divider{opacity:.4}.latest{font-size:12px;letter-spacing:1px;border:1px solid #3d5732;color:var(--green);padding:1px 6px}.post-content h3{font-size:21px;line-height:1.45;letter-spacing:-.45px;font-weight:600;margin:0 0 9px}.post-content h3 a:after{content:'';position:absolute;inset:0}.post-content h3 a:hover{color:var(--green)}.post-content p{font-size:12px;line-height:1.9;max-width:830px;color:var(--muted);margin:0}.post-arrow{align-self:center;font:22px var(--mono);color:var(--green)}.closing{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:65px 0;padding:34px 0 34px 28px;border-left:2px solid var(--green);background:linear-gradient(90deg,#a4f86a05,transparent)}.closing h2{font-size:25px}.closing p:not(.eyebrow){max-width:490px;color:var(--muted);font-size:13px;line-height:1.8;margin:16px 0 0}.closing>.text-link{flex-shrink:0}.footer{display:flex;gap:28px;align-items:center;border-top:1px solid var(--line);padding:30px 0 35px;color:var(--muted);font:12px var(--mono)}.footer .brand{font-size:18px;color:var(--text);margin-right:auto}.footer a:hover{color:var(--green)}.skip{position:fixed;top:-90px;left:16px;background:var(--green);color:var(--bg);padding:12px;z-index:10}.skip:focus{top:16px}.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}@keyframes blink{50%{opacity:0}}
@media(min-width:1500px){.hero{padding-top:100px;padding-bottom:95px}}@media(max-width:1000px){.shell{padding:0 30px}.hero{gap:35px}h1{font-size:60px}.hero-actions{gap:18px}.hero-actions .text-link{gap:10px}.lede{font-size:15px}}@media(max-width:760px){.shell{padding:0 22px}.header{min-height:87px;gap:14px}.brand{font-size:21px}.header nav{gap:17px;font-size:13px}nav .active:before,nav .active:after{display:none}.hero{grid-template-columns:1fr;padding:48px 0;gap:45px}h1{font-size:clamp(52px,11vw,76px)}.lede,.sublede{max-width:520px}.topic-strip{justify-content:flex-start;gap:16px 24px;font-size:12px}.topic-strip span:first-child{width:100%}.research{padding-top:45px}.section-heading{align-items:start}h2{font-size:24px}.section-heading>.text-link{font-size:12px;margin-top:31px}.post-row{grid-template-columns:24px 1fr 20px;gap:10px;padding:24px 0}.post-content h3{font-size:18px}.post-meta{gap:7px;font-size:12px}.latest{display:none}.closing{display:block;margin:42px 0;padding:25px 0 25px 20px}.closing>.text-link{margin-top:24px}.closing h2{font-size:23px}.footer{flex-wrap:wrap;gap:20px}.footer .brand{width:100%;margin:0}}@media(max-width:380px){.header nav{gap:10px}.shell{padding:0 16px}.hero-actions{gap:14px}.button{gap:12px;padding:13px;font-size:12px}.section-heading{display:block}.section-heading>.text-link{margin-top:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Profile-led homepage, with green reserved for small accents. */
.header .wordmark{display:inline-flex;align-items:baseline;gap:7px;position:relative;flex-shrink:0;padding:9px 0;font:800 italic 28px/1 'Manrope',sans-serif;letter-spacing:-1.8px;color:#f0eff4}
.wordmark-name{position:relative;display:block;transition:letter-spacing .3s,color .3s}
.wordmark-name:after{content:'';position:absolute;left:1px;bottom:-7px;width:28px;height:2px;background:var(--green);transform:skewX(-25deg);transition:width .35s}
.wordmark-dot{width:5px;height:5px;background:var(--green);transform:skewX(-15deg)}
.wordmark:hover .wordmark-name{letter-spacing:-1.1px;color:#fff}
.wordmark:hover .wordmark-name:after{width:100%}
body:before{height:1000px;background:radial-gradient(ellipse at 82% 34%,#7979bc15,transparent 50%),radial-gradient(ellipse at 3% 2%,#8784aa08,transparent 45%)}
.shell{max-width:1240px}.header{min-height:94px;border-color:#ffffff0c}.header nav{font-family:var(--sans);font-size:13px}.header nav .active{color:var(--text)}nav .active:before,nav .active:after{display:none}.header nav a{position:relative;padding:12px 0}.header nav .active:after{display:block;content:'';position:absolute;bottom:3px;left:0;margin:0;width:16px;height:2px;background:var(--green)}
.hero{position:relative;grid-template-columns:1.2fr 1fr;min-height:730px;padding:84px 0 120px;gap:55px;isolation:isolate}.hero-grid{position:absolute;right:-20px;top:40px;width:530px;height:530px;background-image:radial-gradient(#83838f30 .7px,transparent .7px);background-size:22px 22px;mask-image:radial-gradient(ellipse,#000,transparent 69%);z-index:-1;pointer-events:none}.hero .eyebrow{font-size:12px;letter-spacing:1.65px;margin-bottom:28px}.hello{font-size:22px;color:var(--muted);margin:0 0 12px;font-weight:500}h1{font-size:clamp(60px,6.5vw,86px);line-height:1.08;letter-spacing:-4.5px;margin-bottom:22px}.alias-line{display:flex;align-items:center;gap:13px;font:12px var(--mono);margin-bottom:27px;flex-wrap:wrap}.alias{color:var(--green)}.alias-divider{color:#555766}.role{color:#c9c7d8}.cursor{height:12px;width:5px;background:var(--green)}.lede{font-size:17px;color:#dedde5;margin-bottom:9px;line-height:1.7}.sublede{font-size:13px;max-width:420px;color:var(--muted)}.hero-actions{margin-top:30px}.button{border-radius:6px;background:#ededf3;border-color:#ededf3;color:#1a1b23;font-family:var(--sans);font-size:12px;font-weight:700;padding:14px 21px;transition:transform .25s,box-shadow .25s,background .25s}.button:hover{background:#fff;transform:translateY(-3px);box-shadow:0 8px 26px #ffffff12}.text-link{color:#c5c4d1}.hero-actions .text-link{font-family:var(--sans)}.scroll-cue{position:absolute;bottom:37px;left:0;display:flex;gap:12px;align-items:center;font:12px var(--mono);letter-spacing:2px;color:#8e8e9e}.scroll-cue>span{font-size:16px;color:var(--green);animation:nudge 2s ease-in-out infinite}.topic-strip{border-color:#ffffff0d;color:#92919f;padding:23px 0;font-size:12px}.topic-strip span:first-child{color:#b3b0c3}.research{padding-top:75px}h2{font-size:29px}.filters button{border-radius:5px;background:#17181f;color:#aaa8b7;padding:10px 14px}.filters button[aria-pressed=true]{background:#22242b;border-color:#646775;color:#e8e8ed}.filters button:hover{border-color:#8b919e}.post-row{padding:31px 16px 31px 0;border-color:#ffffff10;transition:background .25s,transform .25s}.post-row:hover{background:#ffffff03;transform:translateX(5px)}.post-meta>span:first-child{color:#b5b0ca}.post-number{color:#767582}.post-arrow{color:#aeabba;transition:transform .25s,color .25s}.post-row:hover .post-arrow{color:var(--green);transform:translate(3px,-3px)}.latest{color:var(--green);border-color:#46594e}.post-content h3{font-weight:600}.post-content p{color:#9694a4}.closing{background:linear-gradient(90deg,#9c91d108,transparent);border-left-color:#777183;border-radius:0 12px 12px 0}.footer{border-color:#ffffff10;padding-bottom:38px}.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--green);z-index:50;transform:scaleX(0);transform-origin:left}
@media(prefers-reduced-motion:no-preference){.intro{animation:enter .85s both}.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s,transform .65s}.reveal.is-visible{opacity:1;transform:translateY(0)}}
@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes nudge{50%{transform:translateY(4px)}}
@media(max-width:1000px){.hero{gap:25px;min-height:670px}.hero h1{font-size:68px}.hero .eyebrow{font-size:12px;letter-spacing:1px}}
@media(max-width:760px){.header{min-height:83px}.header nav{font-size:13px;gap:19px}.hero{grid-template-columns:1fr;padding:49px 0 90px;gap:42px;min-height:0}.hero h1{font-size:clamp(62px,13vw,86px);letter-spacing:-3.5px}.hero .eyebrow{font-size:12px;margin-bottom:22px}.hello{font-size:19px}.intro{max-width:550px}.hero-grid{right:0;top:auto;bottom:50px;width:100%;height:440px}.scroll-cue{bottom:25px}.research{padding-top:45px}.post-row:hover{transform:none}.closing{margin-bottom:40px}.role{font-size:12px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.button:hover{transform:none}}

/* Let large monitors use their width; keep text measures readable. */
@media(min-width:1100px){
  .shell{max-width:none;width:100%;padding-inline:clamp(48px,5vw,160px)}
  .hero{grid-template-columns:1.1fr 1fr;column-gap:clamp(55px,6vw,180px)}
  .hero h1{font-size:clamp(80px,5.6vw,144px)}
  .hero .lede{max-width:620px;font-size:clamp(17px,1.15vw,23px)}
  .hero .sublede{max-width:560px;font-size:clamp(13px,.85vw,17px)}
  .hero-grid{width:55%;height:90%;right:0}
  .closing{padding-right:32px}
}
@media(min-width:1400px){
  .header{min-height:108px}
  .header .wordmark{font-size:32px}
  .header nav{font-size:14px;gap:40px}
  .hero{min-height:780px;padding-block:88px 120px}
  .hero .eyebrow{font-size:12px}
  .topic-strip{font-size:12px}
  .post-content h3{font-size:23px}
  .post-content p{font-size:13px}
}
@media(min-width:1700px){
  .post-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,4vw,120px)}
  .post-row{grid-template-columns:32px minmax(0,1fr) 24px}
  .section-heading h2{font-size:34px}
  .hero{min-height:850px}
  .hero-actions{margin-top:38px}
}
@media(max-width:400px){.header .wordmark{font-size:23px}.header nav{font-size:13px;gap:12px}}

/* Preserve the entire chair, cat and keyboard scene instead of cropping as a face. */

#calico-cat {
  --cat-eye-x: 0%;
  --cat-eye-y: 0%;
  --cat-lid-y: -110%;
  position: fixed;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(2px, env(safe-area-inset-bottom));
  width: 156px;
  aspect-ratio: 200 / 270;
  z-index: 1040;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18));
  contain: layout style;
}

#calico-cat .cat-body,
#calico-cat .cat-face {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  background-image: var(--cat-art);
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

#calico-cat .cat-body {
  bottom: 0;
  left: 0;
  background-position: left center;
  transform-origin: 60.5% 50%;
  transform: scaleX(1.06);
}

#calico-cat .cat-head {
  position: absolute;
  left: 23%;
  top: 0;
  width: 76%;
  aspect-ratio: 1;
  transform-origin: 50% 84%;
  transform: perspective(500px) translate(var(--cat-head-x, 0px), var(--cat-head-y, 0px)) rotateY(var(--cat-yaw, 0deg)) rotateX(var(--cat-pitch, 0deg)) rotateZ(var(--cat-tilt, 0deg));
}

#calico-cat .cat-face {
  inset: 0;
  background-position: right center;
}

#calico-cat .cat-eye {
  position: absolute;
  width: 10.6%;
  height: 10%;
  overflow: hidden;
  border-radius: 48% 48% 46% 46%;
  isolation: isolate;
}

#calico-cat .cat-eye-left {
  left: 32.8%;
  top: 48.1%;
  transform: rotate(-10deg);
}

#calico-cat .cat-eye-right {
  left: 56.4%;
  top: 47.3%;
  transform: rotate(10deg);
}

#calico-cat .cat-gaze {
  position: absolute;
  inset: 0;
  transform: translate(var(--cat-eye-x), var(--cat-eye-y));
}

#calico-cat .cat-pupil {
  position: absolute;
  left: 19%;
  top: 10%;
  width: 62%;
  height: 80%;
  border-radius: 48%;
  background: radial-gradient(ellipse at 35% 30%, #27342c 0%, #151d19 55%, #111611 100%);
  box-shadow: 0 0 1px rgba(32, 35, 23, 0.55);
}

#calico-cat .cat-pupil::before,
#calico-cat .cat-pupil::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #fffdf5;
}

#calico-cat .cat-pupil::before {
  left: 18%;
  top: 14%;
  width: 32%;
  height: 25%;
  opacity: 0.95;
}

#calico-cat .cat-pupil::after {
  right: 15%;
  bottom: 17%;
  width: 13%;
  height: 10%;
  opacity: 0.55;
}

#calico-cat .cat-lid {
  position: absolute;
  inset: -5%;
  border-bottom: 1px solid #493324;
  border-radius: 45%;
  background: linear-gradient(#a88c6f, #d4bca0 70%, #e8d2b9);
  transform: translateY(var(--cat-lid-y));
}

#calico-cat .cat-eye-right .cat-lid {
  background: linear-gradient(#8b735b, #b9a187 70%, #dccab4);
}

@media (max-width: 991px) {
  #calico-cat {
    width: 124px;
  }
}

@media (max-width: 575px) {
  #calico-cat {
    width: 96px;
    right: max(0px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  #calico-cat .cat-head,
  #calico-cat .cat-gaze {
    transform: none !important;
  }

  #calico-cat .cat-lid {
    display: none;
  }
}

@media print {
  #calico-cat {
    display: none;
  }
}

/* The original animated sprite is now the homepage's central character. */
.mascot-stage{position:relative;justify-self:center;width:min(100%,540px);aspect-ratio:1;isolation:isolate}
.mascot-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 60% 50%,#84bc9b13,transparent 59%);border:1px solid #a8a0c410;z-index:-1}
.mascot-halo:after{content:'';position:absolute;inset:8%;border:1px dashed #a8a0c41c;border-radius:50%}
.mascot-stage #calico-cat{position:absolute;left:24%;right:auto;bottom:10%;width:60%;z-index:3;filter:drop-shadow(0 15px 18px #0006)}
.mascot-terminal{position:absolute;left:0;top:13%;width:48%;background:#16181fee;border:1px solid #454650;border-radius:10px;transform:rotate(-7deg);box-shadow:0 18px 50px #0004;overflow:hidden;font:clamp(8px,.8vw,12px)/1.8 var(--mono);z-index:1}
.mascot-terminal-top{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #ffffff10;font-size:.75em;color:#9b98ac}
.mascot-terminal-top>span:first-child{letter-spacing:2px;color:#788e80}
.mascot-terminal-code{padding:14px 16px 17px}.mascot-terminal-code p{margin:0 0 8px}.mascot-terminal-code b{color:var(--green);font-weight:400}.mascot-terminal-code .terminal-answer{color:#a8a5b5;font-size:.85em}
.mascot-keyboard{position:absolute;right:-1%;bottom:10.3%;width:47%;height:2%;background:linear-gradient(#565664,#292b36);border-radius:2px 2px 10px 10px;transform:skewY(-4deg);z-index:5}
.mascot-desk{position:absolute;left:4%;right:-3%;bottom:9%;height:1px;background:linear-gradient(90deg,transparent,#676371 25%,#676371 85%,transparent);box-shadow:0 18px 30px 4px #0004;z-index:0}
.mascot-status{position:absolute;top:3%;right:4%;font:9px var(--mono);letter-spacing:1.4px;color:#aaa6b8}
.mascot-hint{position:absolute;bottom:0;left:7%;font:10px var(--mono);color:#9591a5}
@media(min-width:1400px){.mascot-stage{width:min(100%,600px)}}
@media(min-width:1700px){.mascot-stage{width:min(100%,680px)}}
@media(max-width:760px){.mascot-stage{width:min(100%,430px);margin:8px auto 0}.mascot-terminal{font-size:10px}.mascot-terminal-code{padding:10px}.mascot-terminal-top{padding:8px}.mascot-status{font-size:7px}.mascot-hint{font-size:8px}}
@media(max-width:380px){.mascot-terminal{font-size:8px}.mascot-status{letter-spacing:.7px}}
@media(prefers-reduced-motion:no-preference){.mascot-stage{animation:enter .8s .15s both}}
.mascot-terminal{width:40%;top:27%;left:-2%;opacity:.8}
.mascot-halo{background:radial-gradient(ellipse at 65% 55%,#84bc9b18,transparent 60%)}

/* A readable desktop monitor and a separate keyboard in front of the mascot. */
.mascot-stage #calico-cat{left:36%;width:55%;bottom:14%}
.mascot-terminal{left:-3%;top:auto;bottom:23%;width:56%;height:35%;opacity:1;transform:rotate(-3deg);z-index:4;overflow:visible;border:5px solid #30313d;border-bottom-width:13px;border-radius:9px;background:#11151a;box-shadow:0 15px 35px #0005}
.mascot-terminal:before{content:'';position:absolute;top:calc(100% + 12px);left:44%;width:12%;height:26%;background:linear-gradient(90deg,#252631,#454553,#252631)}
.mascot-terminal:after{content:'';position:absolute;top:calc(126% + 10px);left:27%;width:46%;height:6%;background:linear-gradient(#4a4a59,#292a35);border-radius:50% 50% 4px 4px}
.mascot-terminal-top{padding:5px 8px;font-size:.65em}
.mascot-terminal-code{padding:8px 10px;overflow:hidden;height:calc(100% - 25px);font-size:clamp(9px,.8vw,12px);line-height:1.65}
.mascot-terminal-code p{margin:0 0 6px;overflow-wrap:anywhere}.mascot-terminal-code .scene-label{font-size:.6em;letter-spacing:1.5px;color:#747f88;margin-bottom:7px}.mascot-terminal-code .command-line{color:#c9d6ce}.mascot-terminal-code .terminal-answer{font-size:.85em;color:#91bba1}.mascot-terminal .cursor{height:1em;width:.45em;margin-left:3px}.monitor-light{position:absolute;bottom:-9px;right:9px;width:3px;height:3px;border-radius:50%;background:var(--green)}
.mascot-keyboard{right:1%;bottom:8%;width:48%;height:9%;border:1px solid #565566;border-bottom:5px solid #242631;border-radius:5px;transform:perspective(300px) rotateX(28deg) rotateZ(-4deg);background:#31323e;box-shadow:0 10px 18px #0005;padding:5px;z-index:5}
.mascot-event{position:absolute;right:4%;top:15%;padding:8px 12px;border:1px solid #739b8055;border-radius:5px;background:#18231eee;font:600 clamp(9px,1vw,13px) var(--mono);color:#a0d9b2;z-index:5;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.event-complete .mascot-event{opacity:1;transform:translateY(0)}
.mascot-pause{position:absolute;bottom:-5%;right:0;border:1px solid #41404d;border-radius:4px;background:#191a22;color:#aaa6b8;padding:6px 9px;font:9px var(--mono);cursor:pointer}.mascot-pause:hover{color:var(--green);border-color:var(--green)}.mascot-pause[hidden]{display:none}
.terminal-paused .cursor{animation:none}
@media(max-width:760px){.mascot-terminal{width:58%;height:38%;left:-1%}.mascot-terminal-code{font-size:9px;padding:6px}.mascot-terminal-top{padding:4px 6px}.mascot-terminal-code p{margin-bottom:4px}.mascot-pause{font-size:8px}.mascot-hint{left:0;font-size:7px}}
@media(prefers-reduced-motion:reduce){.mascot-event{transition:none}}

/* Monitor and keyboard styling. The cat uses its original intact sprite. */
.mascot-stage{--switch-light:#99e2bd}
.mascot-terminal{left:-4%;bottom:24%;width:46%;height:38%;border:6px solid #2d2e39;border-bottom-width:20px;border-radius:12px;transform:perspective(900px) rotateY(8deg) rotateZ(-2deg);background:radial-gradient(ellipse at 30% 10%,#1b2927,#10141b 65%);box-shadow:inset 0 0 0 1px #111218,0 0 0 1px #636071,8px 12px 0 -4px #1a1b23,0 22px 55px #0008}
.mascot-terminal:before{top:calc(100% + 18px);height:22%;left:42%;width:16%;background:linear-gradient(90deg,#20212b,#50515f 48%,#262732);clip-path:polygon(24% 0,76% 0,100% 100%,0 100%)}
.mascot-terminal:after{top:calc(122% + 15px);height:6%;left:21%;width:58%;border-top:1px solid #777385;background:linear-gradient(#41424f,#20212a);box-shadow:0 10px 15px #0007;clip-path:polygon(19% 0,81% 0,100% 80%,95% 100%,5% 100%,0 80%)}
.mascot-terminal-top{background:#24262e9c;border-radius:5px 5px 0 0;padding:7px 8px}.mascot-terminal-code{position:relative;padding:10px 12px;height:calc(100% - 27px)}
.mascot-terminal-code:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0000000b 3px 4px)}
.monitor-brand{position:absolute;bottom:-15px;left:10px;font:600 7px var(--mono);letter-spacing:2px;color:#b2acbf}.monitor-brand span{margin-left:13px;color:#777585;font-size:5px;letter-spacing:1px}.monitor-light{bottom:-13px;box-shadow:0 0 7px #84bc9b}
.mascot-keyboard{left:48%;right:auto;bottom:6.5%;width:52%;height:15%;padding:6px 7px 11px;transform:rotate(-3deg);border:1px solid #777182;border-bottom:7px solid #292a35;border-radius:8px;background:linear-gradient(145deg,#4b4957,#282b35 60%);box-shadow:0 1px 0 #aaa2b555,inset 0 0 0 2px #20222b,0 15px 0 -6px #171922,0 25px 28px -12px #000b;overflow:visible}
.keyboard-grid{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:3px;position:relative;z-index:1}
.keycap{position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;background:linear-gradient(145deg,#4a4c58,#343641);color:#b6b6c4;font:500 clamp(4px,.55vw,8px) var(--mono);border-top:1px solid #7a788955;border-bottom:2px solid #1b1d26;box-shadow:0 2px 1px #11141a;transition:background .1s,box-shadow .1s,transform .1s;min-width:0}
.keycap[data-key="ESC"],.keycap[data-key="ENTER"]{color:#b9ddc6;background:linear-gradient(#456257,#2d463d)}
.keycap.key-space{grid-column:span 6}.keycap.key-wide{grid-column:span 2}
.keycap.is-down{transform:translateY(2px);background:linear-gradient(#c0f0d5,#6db68c);color:#14261c;box-shadow:0 0 13px #99e2bd99,0 0 4px #e3ffef,inset 0 1px 0 #e4fff0;border-bottom-color:#426d53}
.keyboard-edge{position:absolute;bottom:-4px;left:12%;width:76%;height:2px;background:linear-gradient(90deg,transparent,#84bc9b99,#a699c1aa,transparent);box-shadow:0 2px 8px #84bc9b33}
.keyboard-brand{position:absolute;bottom:1px;left:9px;font:5px var(--mono);letter-spacing:1px;color:#9792a8}.key-ripple{position:absolute;left:var(--hit-x,50%);top:var(--hit-y,40%);width:22%;aspect-ratio:1;border:1px solid #a8edc3;border-radius:50%;opacity:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%)}
.mascot-keyboard.key-impact .key-ripple{animation:impact-ring .48s ease-out both}
.mascot-desk{bottom:6%;left:-7%;right:-3%;height:5px;border-radius:50%;background:linear-gradient(90deg,transparent,#5d586c66,#78718588,transparent);box-shadow:0 18px 30px #0008}
.mascot-event{top:17%;right:0}.mascot-hint{bottom:-2%}.mascot-pause{bottom:-7%}
@keyframes impact-ring{0%{opacity:.7;scale:.2}100%{opacity:0;scale:1.5}}
@media(max-width:760px){.mascot-terminal{width:43%;height:40%;left:0;border-width:4px;border-bottom-width:17px}.mascot-terminal-code{font-size:8px;padding:7px}.mascot-terminal-top{padding:4px}.monitor-brand{font-size:5px;bottom:-13px}.monitor-brand span{font-size:4px}.keyboard-grid{gap:2px}.mascot-keyboard{padding:4px 4px 8px;border-bottom-width:5px;border-radius:5px}.keyboard-brand{font-size:3px}.keycap{border-radius:2px;border-bottom-width:1px;font-size:5px}.mascot-event{font-size:8px}}
.terminal-paused .key-ripple{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.keycap{animation:none!important;transition:none!important}.key-ripple{display:none}}

.header nav{flex-wrap:wrap}
.header nav{margin-left:auto}
.language-switch{display:flex;flex-shrink:0;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);border-radius:5px}
.language-switch[hidden]{display:none}
.language-switch button{border:0;border-radius:3px;padding:7px 8px;background:transparent;color:var(--muted);font:12px var(--mono);cursor:pointer;min-height:32px;min-width:34px}
.language-switch button[aria-pressed=true]{color:var(--green);background:#a4f86a12}
.language-switch button:hover{color:var(--text)}
@media(max-width:1100px){.header nav{gap:18px}}
@media(max-width:760px){.header .wordmark{order:0;margin-right:auto}.header .language-switch{order:1}.header nav{order:2;margin-left:0}}
@media(max-width:760px){.header{flex-wrap:wrap;justify-content:flex-start;gap:14px;padding-block:22px;min-height:0}.header nav{width:100%;justify-content:space-between;gap:10px;font-size:13px}.footer{flex-wrap:wrap}}
@media(max-width:380px){.header nav{font-size:13px}}

/* Shared visual rhythm; retain the mascot and the established palette. */
.eyebrow { letter-spacing: 1px; }
.button { border-radius: 4px; }
.button:hover { transform: none; box-shadow: none; }
.hero .lede { font-size: clamp(17px,1.2vw,22px); }
.hero .sublede { font-size: 14px; line-height: 1.9; max-width: 550px; }
.hero h1 { font-size: clamp(62px,5vw,112px); font-weight: 700; letter-spacing: -.045em; }
.hero .eyebrow { letter-spacing: 1px; }
.post-row:hover { transform: none; }
.post-content h3 { font-weight: 550; }
.post-content p { font-size: 13px; }
.section-heading h2 { font-size: 30px; font-weight: 600; letter-spacing: -.6px; }
.closing { border-left: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; padding: 30px 0; margin: 45px 0 15px; }
.closing h2 { font-size: 24px; letter-spacing: -.5px; }
.closing p:not(.eyebrow) { margin-top: 10px; }
.hero { min-height: 0; padding: 38px 0 60px; gap: 40px; }
.hero .mascot-stage { width: min(100%,480px); }
.hero .eyebrow { margin-bottom: 18px; }
.hero .alias-line { margin-bottom: 20px; }
.hero-latest { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 8px 15px; max-width: 550px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 25px; }
.hero-latest>span:first-child { grid-column: 1/-1; font: 12px var(--mono); letter-spacing: .6px; color: #a6a0b5; }
.hero-latest strong { font-size: 15px; font-weight: 500; line-height: 1.7; }
.hero-latest>span:last-child { color: var(--green); align-self: center; }
.hero-latest:hover strong { color: var(--green); }
.post-meta,.filters button,.post-number { font-size: 12px; }
.post-meta { row-gap: 8px; }
.latest,.post-language { display: inline-flex; align-items: center; font: 12px/1.5 var(--mono); letter-spacing: 0; padding: 2px 6px; border: 1px solid #494451; border-radius: 3px; color: #bbb3ca; white-space: nowrap; }
.latest { color: #afd1bb; border-color: #4c6757; }
.filters button { min-height: 42px; }
.mascot-pause { font-size: 12px; padding: 9px 12px; min-height: 42px; }
@media(min-width:1700px) {
  .hero .mascot-stage { width: min(100%,570px); }
}
@media(max-width:760px) {
  .hero { padding: 26px 0 24px; gap: 28px; }
  .hero h1 { font-size: clamp(48px,11vw,64px); margin-bottom: 16px; }
  .hero .hello { font-size: 17px; margin-bottom: 8px; }
  .hero .eyebrow { font-size: 12px; line-height: 1.7; letter-spacing: .3px; margin-bottom: 14px; }
  .hero .alias-line { gap: 9px; margin-bottom: 16px; }
  .hero .hero-actions { margin-top: 18px; }
  .hero .mascot-stage { width: min(100%,270px); margin: 0 auto 35px; }
  .hero .scroll-cue,.topic-strip { display: none; }
  .hero-latest { margin-top: 20px; padding-top: 13px; }
  .hero-latest strong { font-size: 14px; }
  .research { padding-top: 28px; }
  .latest { display: inline-flex; }
  .hero .sublede { font-size: 13px; }
  .section-heading h2 { font-size: 26px; }
  .section-heading>.text-link { margin-top: 6px; }
}

