:root{--bg: #E7E6E1;--panel: #F4F3EE;--fg: #000F08;--muted: #5D625E;--line: #C9C8C1;--accent: #AAFB3B;--f-body: "Albert Sans", system-ui, -apple-system, sans-serif;--f-mono: "DM Mono", ui-monospace, Menlo, monospace;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-body);display:flex;flex-direction:column}button,input{font:inherit;color:inherit}.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}.brand{font-weight:700;font-size:19px;text-decoration:none;color:inherit;white-space:nowrap}.brand .sq{display:inline-block;width:.55em;height:.55em;margin-left:.15em;background:var(--accent);border-radius:2px}.brand small{font:12px var(--f-mono);color:var(--muted);font-weight:400}.species{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:3px 12px;cursor:pointer;font-size:13px}.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}.wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;flex:1;min-height:0}.stage{position:relative;min-height:360px}#tree{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.status{position:absolute;left:16px;top:12px;font:12px var(--f-mono);color:var(--muted);background:color-mix(in srgb,var(--bg) 80%,transparent);padding:2px 8px;border-radius:6px}.controls{position:absolute;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:10px 18px;align-items:end;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);border-radius:12px;padding:10px 14px}.sl{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;font:12px var(--f-mono);color:var(--muted)}.sl b{color:var(--fg);font-weight:500}.sl input{width:100%;accent-color:var(--fg)}.btn{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 14px;cursor:pointer;white-space:nowrap}.btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}.info{overflow:auto;border-left:1px solid var(--line);background:var(--panel);padding:16px 18px 40px}.info h1{font-size:24px;line-height:1.15;margin:0}.info .lat{font-style:italic;color:var(--muted)}.info .tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.info .tags span{font:11px var(--f-mono);border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted)}.info h2{font:11px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 6px}.info dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:14px}.info dt{font:12px var(--f-mono);color:var(--muted);padding-top:2px}.info dd{margin:0;min-width:0}.info p{margin:6px 0}.info svg{width:100%;height:auto;display:block}.info svg text{font:10px var(--f-mono);fill:var(--muted)}.info .now{stroke:var(--fg);stroke-width:1;stroke-dasharray:3 3}body.bare .bar{display:none}@media(max-width:860px){body{display:block;height:auto}.wrap{display:block}.stage{height:62vh}.info{border-left:0;border-top:1px solid var(--line)}}body.bare,body.bare .wrap{display:block;height:100%}body.bare .stage{height:100%;min-height:0}body.bare .info{display:none}
