: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)}
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}
@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}
.logo{position:fixed;top:clamp(14px,3vh,28px);left:clamp(16px,2.5vw,56px);z-index:11;font-family:Helvetica,Arial,sans-serif;font-weight:700;font-style:oblique;color:var(--accent);font-size:clamp(15px,1.3vw,19px);letter-spacing:-0.01em;user-select:none;background:var(--ground);padding-right:8px;display:flex;align-items:baseline;gap:1ch;text-decoration:none}
.graph-logo{width:max-content;white-space:nowrap}
.tag{font-weight:400;font-style:normal;color:var(--half);font-size:clamp(11px,0.9vw,13px)}
.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}
.graph-grid{bottom:0}
.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)}
.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}
.nav,.level-selector{position:fixed;top:clamp(14px,3vh,28px);right:clamp(16px,2.5vw,56px);z-index:12;background:var(--ground);padding:0 0 6px 8px;font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:clamp(11px,1.05vw,15px);line-height:1.55;color:var(--muted);user-select:none}
.nav a{color:var(--muted);text-decoration:none;cursor:pointer}.nav a:hover{color:var(--accent)}
.level-selector{display:flex}.level-selector button{cursor:pointer;color:var(--muted);transition:color .2s ease,font-weight .2s ease}.level-selector button:hover{color:var(--accent)}.level-selector button[aria-current=true]{color:var(--half);font-weight:700}.level-selector span{padding:0 .75ch;color:var(--rule)}
.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(11px,1.05vw,15px);line-height:1.55;color:var(--muted);user-select:none}
.tree-controls button{cursor:pointer}.tree-controls button:hover{color:var(--accent)}.tree-controls span{padding:0 .5ch;color:var(--rule)}
.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(16px,2.4vh,26px);--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;--i:4}
.reading-depth.expert{font-size:clamp(16px,1.25vw,20px);color:var(--body)}
.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{color:var(--accent)}.foot a.graph{color:var(--accent);font-weight:700}.foot a.graph:hover{color:var(--accent-hover)}
.social-links{display:flex;gap:2ch}
.vidwrap{width:100%;height:100%;background:#eaf4fb;overflow:hidden;opacity:0;transition:opacity 1.4s ease}.vidwrap.in{opacity:1}.vidwrap video{width:100%;height:100%;object-fit:cover;display:block}
.loading-note,.error-note{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;color:var(--half)}
@media(max-width:720px){
  .site-grid{grid-template-columns:1fr;grid-template-rows:minmax(44vh,1fr) minmax(0,1fr)}
  .site-left,.site-right{height:auto}.site-right{padding:24px 18px 54px}.home-grid{bottom:54px}.foot{height:54px;gap:10px}.foot>a.graph{display:none}.social-links{gap:1ch}.tag{display:none}
  .graph-grid{padding-top:40px}.graph-left{padding-top:24px}.tree-controls{padding-top:10px}.level-selector{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.row,.row .lb,.row .c,.pane>*,.vidwrap{animation:none!important;transition:none!important}}