:root{--ground:#fff;--ink:#000;--body:#111;--half:#808080;--muted:#b4b4b4;--rule:#d8d8d8;--accent:#63b0f5;--accent-hover:#3d94e8}
html,body{margin:0;padding:0;background:var(--ground);height:100%;overflow:hidden}
body{color:var(--ink);opacity:0;animation:pgin .45s cubic-bezier(0,0,.2,1) forwards}
body.is-leaving{opacity:0;transition:opacity .32s cubic-bezier(.4,0,.2,1)}
@keyframes pgin{to{opacity:1}}
a{color:var(--ink)}a:hover{color:var(--ink)}
button{appearance:none;border:0;background:transparent;padding:0;color:inherit;font:inherit}
.g{color:var(--half)}
.c{display:inline-block;width:1ch;height:1.55em;vertical-align:top;position:relative;--w:max(1px,0.085em);--k:var(--half)}
.c.pipe::before,.c.tee::before{content:"";position:absolute;left:50%;top:-0.01em;bottom:-0.01em;width:var(--w);margin-left:calc(var(--w) / -2);background:var(--k)}
.c.elbow::before{content:"";position:absolute;left:50%;top:-0.01em;height:calc(50% + 0.01em + var(--w) / 2);width:var(--w);margin-left:calc(var(--w) / -2);background:var(--k)}
.c.tee::after,.c.elbow::after{content:"";position:absolute;left:50%;top:50%;right:0;height:var(--w);margin-top:calc(var(--w) / -2);background:var(--k)}
.c.dash::before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--w);margin-top:calc(var(--w) / -2);background:var(--k)}
.lb{display:inline-block;height:1.55em;line-height:1.55em;vertical-align:top}
.row{display:block;white-space:pre;cursor:default;height:1.55em;overflow:hidden;opacity:1;--d:0ms;transition-property:height,opacity,font-weight;transition-duration:.3s,.26s,.12s;transition-timing-function:cubic-bezier(.2,.85,.25,1),cubic-bezier(.2,.85,.25,1),ease;transition-delay:var(--d),var(--d),0ms;outline:none}
.row.off{height:0;opacity:0;pointer-events:none;transition-duration:.17s,.12s,.1s;transition-timing-function:cubic-bezier(.4,0,.9,.35),linear,ease;transition-delay:0ms}
.row.off .lb,.row.off .c{transition:transform .17s cubic-bezier(.4,0,.9,.35)}
.row .lb,.row .c{transition:transform .3s cubic-bezier(.2,.85,.25,1) var(--d)}
.row.off .lb,.row.off .c{transform:translateY(-0.34em)}
.row.hit{cursor:pointer}
.row.hit:hover .lb,.row.hit:focus-visible .lb{color:var(--accent);font-weight:700}
.row.locked{color:#c4c4c4;pointer-events:none}
@keyframes kin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane>*{animation:kin .5s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(var(--i) * 55ms)}
.scr{scrollbar-width:none}
.scr::-webkit-scrollbar{display:none}
.row.sel .lb{color:var(--accent)}
.site-grid{position:fixed;inset:0 0 40px;overflow:hidden;background:var(--ground);display:grid;grid-template-columns:1fr 1fr}
.site-left,.site-right{min-width:0;height:100%;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;justify-content:safe center}
.site-left{padding:0 clamp(16px,2.5vw,56px)}
.site-right{padding:clamp(48px,9vh,96px) clamp(40px,7vw,120px) clamp(40px,8vh,88px) clamp(20px,3vw,64px)}
.home-left,.home-right{position:relative}
.home-left{display:block}
.home-left .tree{position:absolute;left:clamp(16px,2.5vw,56px);top:50%;transform:translateY(-50%);transition:top .5s cubic-bezier(.32,1.5,.5,1),transform .5s cubic-bezier(.32,1.5,.5,1)}
.home-right{display:block;padding:0}
.home-layer{position:absolute;inset:0;padding:clamp(48px,9vh,96px) clamp(40px,7vw,120px) clamp(40px,8vh,88px) clamp(20px,3vw,64px);box-sizing:border-box;opacity:0;pointer-events:none;transition:opacity .9s ease}
.home-pane-layer{display:flex;flex-direction:column;justify-content:safe center;transition-duration:.6s}
.home-layer.is-visible{opacity:1;pointer-events:auto}
.home-video-layer{overflow:hidden}
.home-video-layer video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.tree{margin:0;flex:none;width:max-content;padding-bottom:clamp(20px,5vh,48px);font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:clamp(11px,0.86vw,14px);line-height:1.55;color:var(--ink);white-space:pre;letter-spacing:0}
.tree-controls{position:sticky;top:0;z-index:10;flex:none;display:flex;align-self:stretch;background:var(--ground);margin:0 calc(-1 * clamp(16px,2.5vw,56px));padding:clamp(14px,3vh,28px) clamp(16px,2.5vw,56px) clamp(10px,2vh,20px);font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:clamp(10px,.72vw,12px);letter-spacing:.12em;line-height:1.55;color:var(--half);user-select:none}
.tree-controls a{color:var(--half);text-decoration:none}.tree-controls a:hover,.tree-controls button:hover{color:var(--accent)}.tree-controls button{cursor:pointer;min-height:24px}.tree-controls span{padding:0 .5ch;color:#d0d0d0}
.reading-pane{max-width:62ch}
.reading-path{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:clamp(10px,0.72vw,12px);letter-spacing:.12em;color:var(--half);margin-bottom:clamp(10px,1.6vh,16px);--i:0}
.reading-title{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:clamp(24px,2.3vw,38px);line-height:1.18;color:var(--ink);letter-spacing:-.012em;margin-bottom:clamp(10px,1.4vh,15px);--i:1}
.reading-gloss{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:clamp(13px,.98vw,15.5px);line-height:1.6;color:#8a8a8a;text-wrap:pretty;margin-bottom:clamp(16px,2.4vh,26px);--i:2}
.reading-summary{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(16px,1.25vw,20px);line-height:1.62;color:var(--body);text-wrap:pretty;--i:2}
.graph-right .reading-summary{margin-bottom:clamp(18px,2.8vh,30px);--i:3}
.reading-depth{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(14px,1.03vw,16.5px);line-height:1.72;color:#5a5a5a;text-wrap:pretty;margin-bottom:clamp(14px,2vh,20px);--i:4}
.reading-deep-toggle{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:clamp(10px,.78vw,13px);letter-spacing:.08em;color:var(--half);cursor:pointer;--i:5}.reading-deep-toggle:hover,.reading-deep-toggle:focus-visible{color:var(--accent)}
.reading-long{margin-top:clamp(10px,1.6vh,16px);--i:6}
.reading-example{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:clamp(15px,1.1vw,18px);line-height:1.6;color:#5a5a5a;text-wrap:pretty;margin-top:clamp(14px,2vh,20px);--i:3}
.foot{position:fixed;left:0;right:0;bottom:0;height:40px;z-index:11;background:var(--ground);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,2.5vw,56px);box-sizing:border-box;font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:clamp(10px,.85vw,12px);letter-spacing:.08em;color:var(--half);user-select:none}
.foot a{color:var(--half);text-decoration:none}.foot a:hover,.foot button:hover{color:var(--accent)}.foot a.graph{color:var(--accent);font-weight:700}.foot a.graph:hover{color:var(--accent-hover)}
.foot-center,.social-links{display:flex;align-items:center;gap:2ch}.foot button{cursor:pointer}
.icon-link{display:flex}.icon-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}.icon-link .icon-dot{fill:currentColor;stroke:none}
.mail-form{display:grid;gap:clamp(12px,1.8vh,18px);margin-top:clamp(18px,2.6vh,26px);--i:4}
.mail-form input,.mail-form textarea{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(15px,1.1vw,18px);color:var(--body);background:none;border:0;border-bottom:1px solid #ddd;outline:0;padding:6px 0;resize:none}.mail-form input:focus,.mail-form textarea:focus{border-bottom-color:var(--accent)}
.mail-form button,.mail-note{justify-self:start;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:clamp(10px,.78vw,13px);letter-spacing:.08em;color:var(--half)}.mail-form button{cursor:pointer}.mail-form button:hover{color:var(--accent)}.mail-note{font-size:10px;color:var(--muted)}
.loading-note,.error-note{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;color:var(--half)}
@media(max-width:1024px){
  .site-right,.home-layer{padding-right:clamp(24px,5vw,56px);padding-left:clamp(18px,3vw,32px)}
}
@media(max-width:720px){
  .site-grid{grid-template-columns:1fr;grid-template-rows:minmax(46svh,1fr) minmax(0,1fr);bottom:60px}
  .site-left,.site-right{height:auto}.site-right{padding:22px 18px 36px}.home-right{padding:0}.home-layer{padding:22px 18px 36px}
  .home-left .tree{left:18px;font-size:clamp(10px,2.8vw,12px)}
  .foot{height:60px;padding:0 18px;gap:10px}.foot-center{gap:1ch}.social-links{gap:1ch}.foot .mail{display:none}
  .graph-left{padding:0 18px}.tree-controls{padding:10px 18px;margin:0 -18px}.graph-right{padding:22px 18px 36px}
}
@media(prefers-reduced-motion:reduce){body,.row,.row .lb,.row .c,.pane>*,.home-layer{animation:none!important;transition:none!important}}