:root{--bg:#000;--ink:#ffffff;--ink2:#d6d6d6;--mute:#8c8c8c;--dim:#d6d6d6;--hair:#1e1e1e;--logo:#f2f2f2;--glow:0 0 10px rgba(255,255,255,.22);
  --wire:#ffffff;
  --head:"JetBrains Mono",ui-monospace,Menlo,monospace;--brand:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:300 16px/1.6 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute)}
.wrap{max-width:760px;margin:0 auto;padding:28px 24px 36px;min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center}
.top{align-self:stretch;display:flex;justify-content:space-between}
h1{margin-top:6vh;font:700 clamp(30px,8.2vw,66px)/1 var(--head);color:var(--ink);text-shadow:var(--glow)}
.tagline{margin-top:30px;align-self:stretch}
.role{margin-top:30px;font-size:13px;letter-spacing:.02em;color:var(--ink);text-shadow:var(--glow);max-width:32em}
.lsi{margin-top:44px;display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-shadow:var(--glow);transition:color .5s}
.lsi:hover{color:#ffffff}
.lsi .mark{width:21px;height:15px;color:var(--ink)}
.lsi .wm{font:700 12px/1 var(--brand);letter-spacing:.26em}
.lsi-note{margin-top:10px;font-size:10px}
.lsi-note::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dim);margin-right:9px;vertical-align:1px;animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.25}50%{opacity:1}}
.prev{margin-top:72px;width:100%;border-top:1px solid var(--hair);padding-top:22px}
.kick{font-size:10px;text-transform:uppercase;letter-spacing:.18em}
.logos{list-style:none;margin-top:0;display:grid;grid-template-columns:repeat(4,1fr);row-gap:34px;column-gap:18px;align-items:end}
.logos li{display:flex;flex-direction:column;align-items:center;gap:12px}
.logo{display:block;height:var(--h);aspect-ratio:var(--ar);background:var(--logo);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;transition:background .4s}
.logo-text{font:400 14px/1 var(--mono);letter-spacing:.2em;color:var(--logo);height:24px;display:flex;align-items:center}
.cap{font:300 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase;white-space:nowrap}
.android{margin-top:38px;display:inline-flex;align-items:center;gap:10px;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.android .logo{--logo:#fff}
.links{margin-top:56px;width:100%;border-top:1px solid var(--hair);padding-top:30px;display:flex;justify-content:center;gap:clamp(36px,9vw,72px)}
.links a{display:flex;flex-direction:column;align-items:center;gap:12px;height:48px;justify-content:flex-end}
.links .logo{--logo:#fff}
.links a:hover .logo{filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
footer{margin-top:auto;padding-top:64px;font-size:10px}
@media (max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}h1{margin-top:5vh}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* split-flap tiles */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.board{display:inline-flex;align-items:center;--tw:.9em;--th:1.32em;--gap:clamp(4px,1.1vw,8px)}
.word{display:inline-flex;gap:var(--gap)}
.wgap{display:inline-block;width:calc(var(--tw)*.55)}
.tile{position:relative;display:inline-block;width:var(--tw);height:var(--th);border-radius:5px;perspective:2.6em;background:#141414;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.6)}
.hf,.fl{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tt{top:0;border-radius:5px 5px 0 0;background:linear-gradient(#1c1c1c,#171717);transform-origin:50% 100%}
.tb{bottom:0;border-radius:0 0 5px 5px;background:linear-gradient(#131313,#101010);transform-origin:50% 0}
.hf b,.fl b{position:absolute;left:0;right:0;height:var(--th);line-height:var(--th);text-align:center;font-weight:700}
.tt b{top:0}
.tb b{bottom:0}
.fl{visibility:hidden;z-index:2}
.fl.tt{box-shadow:0 -1px 0 rgba(255,255,255,.03) inset}
.tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#000;z-index:3;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.tile::before{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:6px;margin-top:-3px;z-index:4;background:linear-gradient(90deg,#000 0 3px,transparent 3px calc(100% - 3px),#000 calc(100% - 3px))}
.tile.click{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.25)}
@media (max-width:420px){.board{--gap:4px}}
/* continuous wire tagline */
.tagline{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;margin-top:var(--wire-mt,36px)}
.wire{display:block;width:min(860px,64vw);margin:0 auto}
.wire svg{display:block;width:100%;height:auto;overflow:visible}
.wire-two{display:none;width:66vw}
.wire .w,.wire .a{fill:none;stroke:var(--wire);stroke-width:var(--wire-w,1px);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wire circle.a{fill:var(--wire);stroke:none}
@media (max-width:640px){.wire-one{width:90vw}.wire-two{display:none}:root{--wire-w:1.1px}}
.fl.tt{border-bottom:1px solid rgba(255,255,255,.12)}.fl.tb{border-top:1px solid rgba(255,255,255,.06)}

/* mobile: tighter vertical rhythm */
@media (max-width:560px){
  .wrap{padding-top:20px}
  h1{margin-top:3vh}
  .tagline{margin-top:18px}
  .role{margin-top:16px}
  .lsi{margin-top:22px}
  .lsi-note{margin-top:8px}
  .prev{margin-top:30px;padding-top:16px}
  .logos{margin-top:18px;row-gap:24px}
  .android{margin-top:26px}
  .links{margin-top:30px;padding-top:22px}
  footer{padding-top:36px}
}

/* hide the plain name until tiles exist (failsafe reveal after 2s) */
.anim h1[data-flap]:not(.flap-on){opacity:0;animation:nameReveal 0s 2s forwards}
@keyframes nameReveal{to{opacity:1}}

/* v8: terminal touches */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:32px 32px;background-position:center top;
  -webkit-mask:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 85%);mask:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 85%)}
.ps{color:#5a5a5a}
.prompt{margin-top:6vh;font-size:11px;letter-spacing:.06em;color:var(--mute)}
.prompt+h1{margin-top:16px}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:.35em;vertical-align:-.17em;background:var(--ink);box-shadow:var(--glow);animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gitlog{font-size:10px;letter-spacing:.06em;margin-bottom:26px}
.sha{color:#555;margin-right:.7em;letter-spacing:.04em;text-transform:none}
.keys{margin-top:22px;font-size:10px;letter-spacing:.08em;color:#5a5a5a}
.keys kbd{font:inherit;color:var(--mute);border:1px solid #2a2a2a;border-radius:3px;padding:1px 5px;margin:0 1px}
footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:10px;row-gap:6px;letter-spacing:.06em}
footer .sep{color:#3a3a3a;margin:0 10px}
.fg{white-space:nowrap}
.nw{white-space:nowrap}
footer{column-gap:0;row-gap:8px}
@media (max-width:560px){footer{flex-direction:column}}
.status{display:inline-flex;align-items:center;gap:7px}
.dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:breathe 2.4s ease-in-out infinite}
@media (hover:none),(pointer:coarse),(max-width:560px){.keys{display:none}}
@media (max-width:560px){
  .prompt{margin-top:3vh;font-size:10px}
  .prompt+h1{margin-top:12px}
  .gitlog{margin-bottom:18px}
  .logos{margin-top:0}
  footer .sep-mid{display:none}
}

/* v9: featured in */
.press{margin-top:40px;display:flex;flex-direction:column;align-items:center}
.grep{font-size:10px;letter-spacing:.06em;margin-bottom:18px}
.press-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:clamp(28px,7vw,52px);row-gap:16px;max-width:100%}
.press-logos a{display:block;padding:4px 0}
.press-logos .logo{--logo:#d6d6d6}
.press-logos a:hover .logo,.press-logos a:focus-visible .logo{--logo:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
@media (max-width:560px){.press{margin-top:28px}.grep{margin-bottom:14px}.press-logos{column-gap:26px}.press-logos .logo{height:calc(var(--h)*.88)}}

/* v9: 10-logo grid, 4 / 4 / 2 centered on desktop */
.logos{grid-template-columns:repeat(8,1fr)}
.logos li{grid-column:span 2}
.logos li:nth-child(9){grid-column:3/span 2}
@media (max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}.logos li,.logos li:nth-child(9){grid-column:auto}}
/* smaller logos */
.logos .logo{height:calc(var(--h)*.8)}
@media (max-width:560px){.logos .logo{height:calc(var(--h)*.82)}}
/* tweets */
.tweets{margin-top:44px;display:flex;flex-direction:column;align-items:center;width:100%}
.tw-list{list-style:none;width:min(560px,100%);display:flex;flex-direction:column;gap:10px}
.tw-list a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:12px 14px;border:1px solid var(--hair);border-radius:6px;color:#d6d6d6;text-decoration:none;text-align:left;font-size:13px;line-height:1.5;transition:border-color .3s,color .3s,background .3s}
.tw-list a:hover,.tw-list a:focus-visible{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.02)}
.tw-sha,.tw-date{font-size:10px;letter-spacing:.06em;color:#6b6b6b}
@media (max-width:560px){.tweets{margin-top:30px}.tw-list a{grid-template-columns:1fr;gap:6px;font-size:12.5px}.tw-sha{display:none}.tw-date{order:2}}
/* v11: reactive dot-grid background */
body::before{display:none}
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}

.tw-list a{background:rgba(0,0,0,.82)}
.tw-list a:hover,.tw-list a:focus-visible{background:rgba(10,10,10,.9)}
/* v12: bookshelf */
.books{margin-top:48px;display:flex;flex-direction:column;align-items:center;width:100%}
.shelf{list-style:none;display:flex;align-items:flex-end;gap:5px;padding:0 4px 10px;border-bottom:1px solid #2a2a2a;max-width:100%;overflow-x:auto;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.book{all:unset;cursor:pointer;position:relative;display:block;height:var(--bh);width:var(--sw);transition:width .55s cubic-bezier(.2,.8,.2,1),transform .4s;transform-origin:bottom}
.book .spine{position:absolute;inset:0;background:var(--c);border-radius:2px 2px 1px 1px;box-shadow:inset 2px 0 0 rgba(255,255,255,.12),inset -3px 0 0 rgba(0,0,0,.25),inset 0 10px 0 -8px rgba(255,255,255,.25),inset 0 -10px 0 -8px rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;filter:grayscale(1) brightness(.85);transition:opacity .35s,filter .4s}
.book .st{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--ink);font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;max-height:calc(100% - 22px)}
.book .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px;opacity:0;transition:opacity .35s .1s;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.book:hover .spine,.book:focus-visible .spine{filter:grayscale(0) brightness(1)}
.book.open{width:calc(var(--bh)*.66);transform:translateY(-6px)}
.book.open .spine{opacity:0}
.book.open .cover{opacity:1}
.book:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:3px}
.book-cap{margin-top:14px;font-size:10px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase;min-height:1.6em}
.book-cap .bt{color:#e6e6e6}
@media (max-width:560px){.books{margin-top:34px}.book{height:calc(var(--bh)*.78);width:calc(var(--sw)*.85)}.book.open{width:calc(var(--bh)*.78*.66)}.shelf{justify-content:flex-start;gap:4px}}
/* v13: two-row bookshelf (24 books). Each row is a fixed-width shelf so opening a book never reflows the others. */
.shelves{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.shelves .shelf{width:min(var(--rw),100%);justify-content:center;overflow:visible;padding:0 4px 10px}
.shelves .shelf li{flex:0 0 auto}
@media (max-width:700px){
  .shelves{flex-direction:row;gap:4px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-top:10px;margin-top:-10px;-webkit-overflow-scrolling:touch;scroll-snap-type:none;
    -webkit-mask:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
  .shelves::-webkit-scrollbar{display:none}
  .shelves .shelf{width:auto;flex:0 0 auto;justify-content:flex-start;gap:4px;padding:0 0 10px;max-width:none}
  .shelves .shelf:first-child{padding-left:2px}
  .shelves .shelf:last-child{padding-right:30px}
}
.book .st{text-overflow:ellipsis}
/* v13: kitchen door reveal. Hidden unless the inline head script adds html.door (JS on, motion allowed, first visit this session). */
.kd{display:none}
html.door .kd{display:block;position:fixed;inset:0;z-index:1000;perspective:1700px;perspective-origin:50% 42%;overflow:hidden;--pd:clamp(96px,24vmin,210px);animation:kdFail 0s 5s forwards}
@keyframes kdFail{to{visibility:hidden;opacity:0}}
.kd-door{position:absolute;top:0;bottom:0;width:calc(50% - 1px);transform-style:preserve-3d;backface-visibility:visible}
.kd-l{left:0;transform-origin:0 50%}
.kd-r{right:0;transform-origin:100% 50%}
/* v19: realistic brushed metal doors. Texture is procedural (tools/steel.py). Variant via html.dk-a|dk-b|dk-c (?doors=a|b|c). */
.kd-face{position:absolute;inset:0;overflow:hidden;background-color:#202124;
  background-image:var(--kd-lite),url(steel-v.webp),linear-gradient(90deg,var(--kd-tone));background-size:100% 100%,256px 512px,100% 100%;background-blend-mode:normal,var(--kd-mix,overlay),normal;
  box-shadow:var(--kd-bevel)}
.kd-r .kd-face{background-image:var(--kd-lite),url(steel-v.webp),linear-gradient(270deg,var(--kd-tone));box-shadow:var(--kd-bevel-r);background-position:0 0,137px 211px,0 0}
.kd-face::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(90deg,var(--kd-sheen));background-size:220% 100%;background-position:70% 0}
.kd-r .kd-face::after{background-image:linear-gradient(270deg,var(--kd-sheen));background-position:30% 0}
.kd-shade{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.kd-sign{position:absolute;top:calc(22% - var(--pd)*.5 - 34px);left:0;right:0;text-align:center;font:700 11px/1 var(--mono);letter-spacing:.5em;text-indent:.5em;color:var(--kd-ink);text-shadow:var(--kd-ink-sh)}
.kd-port{position:absolute;left:50%;top:22%;width:var(--pd);height:var(--pd);margin:calc(var(--pd)*-.5) 0 0 calc(var(--pd)*-.5);border-radius:50%;padding:calc(var(--pd)*.07);
  background:conic-gradient(from 210deg,var(--kd-r1),var(--kd-r2) 14%,var(--kd-r3) 27%,var(--kd-r2) 40%,var(--kd-r1) 52%,var(--kd-r2) 66%,var(--kd-r3) 79%,var(--kd-r2) 90%,var(--kd-r1));
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 1px 0 1px rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.6)}
.kd-port i{display:block;width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 64%,#8a857d 0,#5a5650 22%,#2b2927 50%,#121110 74%,#080808 100%);
  box-shadow:0 0 0 3px #0b0b0b,inset 0 0 0 1px #000,inset 0 8px 22px rgba(0,0,0,.95),inset 0 -2px 8px rgba(255,245,228,.06);animation:kdHum 2.6s ease-in-out infinite}
.kd-port i::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 28%,rgba(255,255,255,.18) 37%,transparent 44%,transparent 52%,rgba(255,255,255,.08) 56%,transparent 61%)}
@keyframes kdHum{0%,100%{filter:brightness(1)}47%{filter:brightness(1.08)}50%{filter:brightness(.94)}53%{filter:brightness(1.06)}}
.kd-push{position:absolute;top:42%;width:clamp(20px,3.4vw,44px);height:24%;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.22) 40%,rgba(255,255,255,0) 75%),url(steel-v.webp) 0 0/128px 256px,var(--kd-plate);background-blend-mode:screen,overlay,normal;
  box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.45),inset 1px 0 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.45),inset -1px 0 0 rgba(0,0,0,.3),2px 5px 9px rgba(0,0,0,.45)}
.kd-push::before{content:"";position:absolute;inset:7px 0;background:radial-gradient(circle,var(--kd-screw) 0 1.3px,rgba(0,0,0,.6) 1.9px,transparent 2.6px) 50% 0/6px 6px no-repeat,radial-gradient(circle,var(--kd-screw) 0 1.3px,rgba(0,0,0,.6) 1.9px,transparent 2.6px) 50% 100%/6px 6px no-repeat}
.kd-l .kd-push{right:clamp(14px,2.6vw,36px)}
.kd-r .kd-push{left:clamp(14px,2.6vw,36px)}
.kd-kick{position:absolute;left:10px;right:10px;bottom:10px;height:15%;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 22%,transparent 70%,rgba(0,0,0,.28)),url(steel-h.webp) 0 0/512px 128px,var(--kd-plate);background-blend-mode:normal,overlay,normal;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.5),0 -3px 8px rgba(0,0,0,.35)}
.kd-kick::before,.kd-kick::after{content:"";position:absolute;top:10px;bottom:10px;width:6px;background:radial-gradient(circle,var(--kd-screw) 0 1.3px,rgba(0,0,0,.6) 1.9px,transparent 2.6px) 0 0/6px 6px no-repeat,radial-gradient(circle,var(--kd-screw) 0 1.3px,rgba(0,0,0,.6) 1.9px,transparent 2.6px) 0 100%/6px 6px no-repeat}
.kd-kick::before{left:12px}.kd-kick::after{right:12px}
.kd-leak{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,246,232,.5);box-shadow:0 0 16px 3px rgba(255,244,226,.16),0 0 60px 10px rgba(255,244,226,.05)}
/* a: brushed stainless kitchen doors */
html.dk-a .kd{
  --kd-tone:#5e6165 0%,#7c7f83 16%,#9fa2a6 38%,#c4c7ca 56%,#a2a5a9 68%,#7f8286 84%,#6a6d71 100%;
  --kd-lite:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.42));
  --kd-sheen:transparent 30%,rgba(255,255,255,.07) 42%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.07) 54%,transparent 66%;
  --kd-plate:linear-gradient(180deg,#a7aaae,#8a8d91);
  --kd-bevel:inset 0 0 0 1px rgba(0,0,0,.65),inset 2px 2px 0 0 rgba(255,255,255,.35),inset -2px -2px 0 0 rgba(0,0,0,.35),inset 9px 0 10px -6px rgba(255,255,255,.18),inset -10px 0 12px -6px rgba(0,0,0,.4),inset 0 -14px 16px -10px rgba(0,0,0,.5),inset 0 0 140px rgba(0,0,0,.28);--kd-bevel-r:inset 0 0 0 1px rgba(0,0,0,.65),inset -2px 2px 0 0 rgba(255,255,255,.35),inset 2px -2px 0 0 rgba(0,0,0,.35),inset -9px 0 10px -6px rgba(255,255,255,.18),inset 10px 0 12px -6px rgba(0,0,0,.4),inset 0 -14px 16px -10px rgba(0,0,0,.5),inset 0 0 140px rgba(0,0,0,.28);
  --kd-ink:rgba(20,21,23,.62);--kd-ink-sh:0 1px 0 rgba(255,255,255,.35);
  --kd-r1:#e9ebed;--kd-r2:#7a7d81;--kd-r3:#b9bcbf;--kd-screw:#d4d6d8}
/* c: blackened steel kitchen doors */
html.dk-c .kd{
  --kd-tone:#141517 0%,#1d1e21 18%,#2a2c2f 40%,#3b3d41 56%,#2c2e31 68%,#1e1f22 84%,#151618 100%;
  --kd-lite:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 24%,rgba(0,0,0,0) 62%,rgba(0,0,0,.45));
  --kd-sheen:transparent 30%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.075) 48%,rgba(255,255,255,.03) 54%,transparent 66%;
  --kd-mix:overlay;
  --kd-plate:linear-gradient(180deg,#404246,#2e3033);
  --kd-bevel:inset 0 0 0 1px rgba(0,0,0,.85),inset 2px 2px 0 0 rgba(255,255,255,.13),inset -2px -2px 0 0 rgba(0,0,0,.5),inset 9px 0 10px -6px rgba(255,255,255,.06),inset -10px 0 12px -6px rgba(0,0,0,.55),inset 0 -14px 16px -10px rgba(0,0,0,.6),inset 0 0 140px rgba(0,0,0,.4);--kd-bevel-r:inset 0 0 0 1px rgba(0,0,0,.85),inset -2px 2px 0 0 rgba(255,255,255,.13),inset 2px -2px 0 0 rgba(0,0,0,.5),inset -9px 0 10px -6px rgba(255,255,255,.06),inset 10px 0 12px -6px rgba(0,0,0,.55),inset 0 -14px 16px -10px rgba(0,0,0,.6),inset 0 0 140px rgba(0,0,0,.4);
  --kd-ink:rgba(255,255,255,.34);--kd-ink-sh:0 -1px 0 rgba(0,0,0,.9);
  --kd-r1:#9a9da1;--kd-r2:#2a2b2e;--kd-r3:#5d6064;--kd-screw:#7d8084}
/* b: gunmetal elevator doors that slide apart */
html.dk-b .kd{
  --kd-tone:#2b2d30 0%,#36393c 18%,#4b4e52 40%,#6a6d72 55%,#53565a 66%,#3b3e41 84%,#2e3033 100%;
  --kd-lite:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 20%,rgba(0,0,0,0) 70%,rgba(0,0,0,.4));
  --kd-sheen:transparent 34%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.05) 55%,transparent 66%;
  --kd-bevel:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 2px 0 0 rgba(255,255,255,.12),inset -1px 0 0 0 rgba(255,255,255,.22),inset -3px 0 0 0 rgba(0,0,0,.35),inset -14px 0 14px -10px rgba(0,0,0,.45),inset 0 0 160px rgba(0,0,0,.3);
  --kd-bevel-r:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 2px 0 0 rgba(255,255,255,.12),inset 1px 0 0 0 rgba(255,255,255,.22),inset 3px 0 0 0 rgba(0,0,0,.35),inset 14px 0 14px -10px rgba(0,0,0,.45),inset 0 0 160px rgba(0,0,0,.3)}
/* elevator sill */
html.dk-b .kd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(10px,1.6vh,16px);z-index:3;background:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 2px,transparent 2px 7px),linear-gradient(180deg,#8d9094,#55585c 45%,#2a2b2e);box-shadow:0 -1px 0 rgba(255,255,255,.25),0 -6px 12px rgba(0,0,0,.6)}
html.dk-b .kd-face{background-size:100% 100%,192px 384px,100% 100%;background-blend-mode:normal,soft-light,normal}
html.dk-b .kd-sign,html.dk-b .kd-port,html.dk-b .kd-push,html.dk-b .kd-kick{display:none}
html.dk-b .kd-leak{width:2px;background:#000;box-shadow:none}
html.dk-b .kd-door{width:50%}
html.dk-b .kd-face::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(22px,4.5vh,40px);background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
html.door .kd.go{pointer-events:none}
html.door .kd.go .kd-l{animation:kdL 1.1s forwards}
html.door .kd.go .kd-r{animation:kdR 1.1s forwards}
html.door .kd.go .kd-shade{animation:kdS 1.1s forwards}
html.door .kd.go .kd-face::after{animation:kdGlint 1.1s cubic-bezier(.5,0,.25,1) forwards}
html.door .kd.go .kd-r .kd-face::after{animation-name:kdGlintR}
@keyframes kdGlintR{0%{background-position:30% 0}56%{background-position:95% 0}100%{background-position:90% 0}}
@keyframes kdGlint{0%{background-position:70% 0}56%{background-position:5% 0}100%{background-position:10% 0}}
html.door.dk-b .kd.go .kd-l{animation:kdSlideL 1.1s cubic-bezier(.62,0,.2,1) forwards}
html.door.dk-b .kd.go .kd-r{animation:kdSlideR 1.1s cubic-bezier(.62,0,.2,1) forwards}
html.door.dk-b .kd.go .kd-face::after{animation:kdHold 1.1s cubic-bezier(.62,0,.2,1) forwards}
html.door.dk-b .kd.go .kd-r .kd-face::after{animation-name:kdHoldR}
@keyframes kdHoldR{to{transform:translateX(-101%)}}
/* v20: d and e use Blender renders (tools in /workspace/doors3d) as the leaf faces; same swing as a and c */
html.dk-d .kd-face,html.dk-e .kd-face{background:#202224 var(--kd-img) no-repeat;background-size:cover;background-position:100% 40%;box-shadow:inset -1px 0 0 rgba(0,0,0,.6)}
html.dk-d .kd-r .kd-face,html.dk-e .kd-r .kd-face{background-position:0 40%;box-shadow:inset 1px 0 0 rgba(0,0,0,.6)}
html.dk-e .kd-face{background-color:#0d0e0f}
html.dk-d .kd-l{--kd-img:url(door-d-l.webp)}html.dk-d .kd-r{--kd-img:url(door-d-r.webp)}
html.dk-e .kd-l{--kd-img:url(door-e-l.webp)}html.dk-e .kd-r{--kd-img:url(door-e-r.webp)}
@media (max-aspect-ratio:1/1){
  html.dk-d .kd-l{--kd-img:url(door-d-l-m.webp)}html.dk-d .kd-r{--kd-img:url(door-d-r-m.webp)}
  html.dk-e .kd-l{--kd-img:url(door-e-l-m.webp)}html.dk-e .kd-r{--kd-img:url(door-e-r-m.webp)}
  html.dk-d .kd-face,html.dk-e .kd-face{background-position:72% 30%}
  html.dk-d .kd-r .kd-face,html.dk-e .kd-r .kd-face{background-position:28% 30%}}
html.dk-d .kd-sign,html.dk-d .kd-port,html.dk-d .kd-push,html.dk-d .kd-kick,html.dk-d .kd-face::after,
html.dk-e .kd-sign,html.dk-e .kd-port,html.dk-e .kd-push,html.dk-e .kd-kick,html.dk-e .kd-face::after{display:none}
html.dk-e .kd-leak{background:rgba(255,236,210,.35)}
html.door.dk-b .kd.go .kd-shade{animation:kdSB 1.1s forwards}
@keyframes kdSlideL{to{transform:translateX(-101%)}}
@keyframes kdSlideR{to{transform:translateX(101%)}}
@keyframes kdHold{to{transform:translateX(101%)}}
@keyframes kdSB{to{opacity:.35}}
html.door .kd.go .kd-leak{opacity:0;transition:opacity .3s}
@keyframes kdL{0%{transform:rotateY(0);animation-timing-function:cubic-bezier(.5,0,.25,1)}56%{transform:rotateY(109deg);animation-timing-function:ease-in-out}76%{transform:rotateY(95deg);animation-timing-function:ease-in-out}90%{transform:rotateY(101.5deg);animation-timing-function:ease-in-out}100%{transform:rotateY(100deg)}}
@keyframes kdR{0%{transform:rotateY(0);animation-timing-function:cubic-bezier(.5,0,.25,1)}56%{transform:rotateY(-109deg);animation-timing-function:ease-in-out}76%{transform:rotateY(-95deg);animation-timing-function:ease-in-out}90%{transform:rotateY(-101.5deg);animation-timing-function:ease-in-out}100%{transform:rotateY(-100deg)}}
@keyframes kdS{0%{opacity:0;animation-timing-function:cubic-bezier(.5,0,.25,1)}56%{opacity:.82}100%{opacity:.78}}
html.door .kd.out{opacity:0;transition:opacity .4s ease}
/* the page comes up behind the doors */
html.door .wrap{opacity:0;transform:scale(.965);transform-origin:50% 22vh;animation:kdFailIn 0s 5s forwards}
html.door #bg{opacity:0;animation:kdFailIn 0s 5s forwards}
html.door.door-in .wrap{opacity:1;transform:none;transition:opacity .75s ease .12s,transform 1.25s cubic-bezier(.2,.7,.2,1)}
html.door.door-in #bg{opacity:1;transition:opacity 1.2s ease .3s}
@keyframes kdFailIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kd{display:none!important}}
/* v14: the glow floods out from the sign (View Transitions) */
@property --vr{syntax:'<length>';inherits:true;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-rev::view-transition-old(root){z-index:2}
html.vt-rev::view-transition-new(root){z-index:1}
html.vt-mask::view-transition-new(root){-webkit-mask:linear-gradient(180deg,transparent calc(var(--vy) - var(--vr) - 160px),#000 calc(var(--vy) - var(--vr)),#000 calc(var(--vy) + var(--vr)),transparent calc(var(--vy) + var(--vr) + 160px));mask:linear-gradient(180deg,transparent calc(var(--vy) - var(--vr) - 160px),#000 calc(var(--vy) - var(--vr)),#000 calc(var(--vy) + var(--vr)),transparent calc(var(--vy) + var(--vr) + 160px))}
html.vt-mask.vt-rev::view-transition-new(root){-webkit-mask:none;mask:none}
html.vt-mask.vt-rev::view-transition-old(root){-webkit-mask:linear-gradient(180deg,transparent calc(var(--vy) - var(--vr) - 160px),#000 calc(var(--vy) - var(--vr)),#000 calc(var(--vy) + var(--vr)),transparent calc(var(--vy) + var(--vr) + 160px));mask:linear-gradient(180deg,transparent calc(var(--vy) - var(--vr) - 160px),#000 calc(var(--vy) - var(--vr)),#000 calc(var(--vy) + var(--vr)),transparent calc(var(--vy) + var(--vr) + 160px))}

/* v14: light theme */
html.light{--bg:#f4f2ec;--ink:#111111;--ink2:#2a2a2a;--mute:#6e6c66;--dim:#3a3a3a;--hair:#dad6cc;--logo:#151515;--glow:none;--wire:#111111;color-scheme:light}
html.light body{background:var(--bg);color:var(--ink)}
html.light h1{color:#f4f2ec;text-shadow:none}
html.light .tile{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.25)}
html.light .ps{color:#a3a098}
html.light .sha{color:#9a978f}
html.light .android .logo,html.light .links .logo{--logo:#111}
html.light .links a:hover .logo{filter:drop-shadow(0 0 6px rgba(0,0,0,.25))}
html.light .press-logos .logo{--logo:#3a3a3a}
html.light .press-logos a:hover .logo,html.light .press-logos a:focus-visible .logo{--logo:#000;filter:drop-shadow(0 0 6px rgba(0,0,0,.2))}
html.light .tw-list a{background:rgba(255,255,255,.86);color:#262626;border-color:#dcd8ce}
html.light .tw-list a:hover,html.light .tw-list a:focus-visible{background:#fff;color:#000;border-color:rgba(0,0,0,.3)}
html.light .tw-sha,html.light .tw-date{color:#8d8a83}
html.light .shelf{border-bottom-color:#c9c5ba}
html.light .book .spine{filter:grayscale(1) brightness(.95) contrast(1.05);box-shadow:inset 2px 0 0 rgba(255,255,255,.18),inset -3px 0 0 rgba(0,0,0,.2),inset 0 10px 0 -8px rgba(255,255,255,.3),inset 0 -10px 0 -8px rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.18)}
html.light .book:hover .spine,html.light .book:focus-visible .spine{filter:none}
html.light .book .cover{box-shadow:0 10px 26px rgba(0,0,0,.25)}
html.light .book:focus-visible{outline-color:rgba(0,0,0,.5)}
html.light .book-cap .bt{color:#111}
html.light .dot{background:#111}
html.light .keys{color:#9a978f}
html.light .keys kbd{border-color:#cdc9bf;color:#55534e}
html.light footer .sep{color:#bdb9ae}
html.light .prev,html.light .links{border-top-color:var(--hair)}
html.light .lsi:hover,html.light .lsi:focus-visible{color:#000}
html.light .tile::before{background:linear-gradient(90deg,var(--bg) 0 3px,transparent 3px calc(100% - 3px),var(--bg) calc(100% - 3px))}
/* v15: books Saba is featured in: a small index tab on top of the spine */
.book.feat .ftab{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:-1px;padding:3px 4px 2px;border-radius:3px 3px 0 0;background:#f2f2f2;color:#0a0a0a;font:700 7.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 0 8px rgba(255,255,255,.18);transition:opacity .3s}
.book.feat .spine{box-shadow:inset 2px 0 0 rgba(255,255,255,.12),inset -3px 0 0 rgba(0,0,0,.25),inset 0 10px 0 -8px rgba(255,255,255,.25),inset 0 -10px 0 -8px rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.55)}
.book-cap .bf{color:#e6e6e6}
html.light .book.feat .ftab{background:#141414;color:#f4f2ec;box-shadow:none}
html.light .book.feat .spine{box-shadow:inset 2px 0 0 rgba(255,255,255,.18),inset -3px 0 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.18)}
html.light .book-cap .bf{color:#111}
.shelves{padding-top:14px}
@media (max-width:700px){.shelves{padding-top:24px;margin-top:-10px}}
@media (max-width:560px){.book .st{font-size:9px;max-height:calc(100% - 14px)}.book .st.sm{font-size:8px}}

/* v15: the tagline wire is the light: tap it to switch on (neon string light), tap again to switch off */
.tagline[role=button]{cursor:pointer;-webkit-tap-highlight-color:transparent;padding:14px 0;margin-bottom:-14px;outline:none}
.tagline[role=button]{margin-top:calc(var(--wire-mt,36px) - 14px)}
@media (max-width:560px){.tagline[role=button]{margin-top:4px}}
.wire svg{transition:filter .35s}
.tagline[role=button]:hover .wire svg,.tagline[role=button]:focus-visible .wire svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.55)) drop-shadow(0 0 10px rgba(255,255,255,.22))}
.tagline[role=button]:focus-visible .wire{outline:1px dashed rgba(255,255,255,.28);outline-offset:6px;border-radius:4px}
html.neon .wire svg{--wire-w:1.35px;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgba(255,255,255,.85)) drop-shadow(0 0 14px rgba(255,248,236,.55)) drop-shadow(0 0 30px rgba(255,248,236,.3))}
html.neon .wire .w,html.neon .wire .a{stroke-width:1.35px}
html.neon-on .wire svg{animation:wireOn .7s linear forwards}
html.neon-off .wire svg{animation:wireOff .5s linear forwards}
@keyframes wireOn{
  0%{opacity:.55;filter:none}
  7%{opacity:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(255,255,255,.8))}
  13%{opacity:.35;filter:none}
  26%{opacity:.4;filter:none}
  30%{opacity:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(255,255,255,.8))}
  35%{opacity:.5;filter:drop-shadow(0 0 2px rgba(255,255,255,.3))}
  47%{opacity:.5;filter:drop-shadow(0 0 2px rgba(255,255,255,.3))}
  52%{opacity:1;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgba(255,255,255,.85)) drop-shadow(0 0 14px rgba(255,248,236,.55))}
  100%{opacity:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #fff) drop-shadow(0 0 20px rgba(255,248,236,.75)) drop-shadow(0 0 46px rgba(255,248,236,.45))}}
@keyframes wireOff{
  0%{opacity:1;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgba(255,255,255,.85)) drop-shadow(0 0 14px rgba(255,248,236,.55))}
  12%{opacity:.4;filter:none}
  24%{opacity:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.7))}
  34%{opacity:.35;filter:none}
  60%{opacity:.4;filter:none}
  68%{opacity:.85;filter:drop-shadow(0 0 3px rgba(255,255,255,.4))}
  76%{opacity:.5;filter:none}
  100%{opacity:1;filter:none}}
html.light .tagline[role=button]:hover .wire svg,html.light .tagline[role=button]:focus-visible .wire svg{filter:drop-shadow(0 0 3px rgba(0,0,0,.25))}
html.light .tagline[role=button]:focus-visible .wire{outline-color:rgba(0,0,0,.3)}
html.light.neon .wire svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(0,0,0,.14)) drop-shadow(0 0 20px rgba(0,0,0,.07))}
/* v15: 48 books, four fixed-width rows on desktop, a little smaller so the section stays compact */
@media (min-width:561px){
  .shelves{gap:14px}
  .shelves .book{height:calc(var(--bh)*.84);width:calc(var(--sw)*.84)}
  .shelves .book.open{width:calc(var(--bh)*.84*.66)}
  .shelves .book .st{font-size:9px;max-height:calc(100% - 18px)}
  .shelves .book .st.sm{font-size:8.5px}
}
/* mobile: the four rows pair up into two rows inside one shared horizontal scroller */
@media (max-width:700px){
  .shelves{display:grid;grid-template-columns:auto auto;column-gap:4px;row-gap:26px;align-items:end;justify-content:start}
  .shelves .shelf:nth-child(odd){padding-left:2px;padding-right:0}
  .shelves .shelf:nth-child(even){padding-right:30px}
}
/* v16: one single scrollable shelf row on every screen size */
.shelves{display:block;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-top:24px;margin-top:-10px;border-bottom:1px solid #2a2a2a;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.shelves::-webkit-scrollbar{display:none}
.shelves.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.shelves.dragging .book{cursor:grabbing}
.shelves ul.shelf.one{display:flex;flex-wrap:nowrap;width:max-content;max-width:none;margin:0;justify-content:flex-start;align-items:flex-end;gap:5px;padding:0 40px 10px;border-bottom:0;overflow:visible}
@media (max-width:560px){.shelves ul.shelf.one{gap:4px;padding:0 28px 10px}.shelves{-webkit-mask:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 28px),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 28px),transparent 100%)}}
.shelves img{-webkit-user-drag:none;user-select:none}
html.light .shelves{border-bottom-color:#c9c5ba}
.book-cap .bf{white-space:nowrap}