*{box-sizing:border-box}body{margin:0;font:14px system-ui;color:#1b3a6b;background:#fbfaf6}button,input{font:inherit}button{cursor:pointer;border:1px solid #dce1e7;background:white;color:#1b3a6b;border-radius:8px;padding:10px 14px}button:hover{background:#edf1f7}button.active{background:#1b3a6b;color:white}header{height:76px;background:white;border-bottom:1px solid #e3e6eb;display:flex;align-items:center;padding:0 24px;gap:26px}.brand{font-size:22px;font-weight:800}.brand span{color:#b5a26a}nav{display:flex;gap:8px}.tag{margin-left:auto;font-size:11px;background:#f4f0e5;padding:8px;border-radius:6px;color:#75623a}.layout{display:flex;height:calc(100dvh - 76px)}aside{width:236px;flex-shrink:0;background:#fff;padding:24px 18px;border-right:1px solid #e3e6eb}aside h5{letter-spacing:1.3px;color:#8993a2;margin:28px 8px 12px}aside button{display:block;width:100%;text-align:left;margin:7px 0;border:0}aside p{font-size:12px;line-height:1.7;color:#6c7789;padding:8px}main{position:relative;flex:1;min-width:0;overflow:hidden;background-image:radial-gradient(#d4d9df 1px,transparent 1px);background-size:22px 22px}.heading{position:absolute;left:28px;top:25px;z-index:2}.heading h1{font-size:23px;margin:0 0 8px}.heading p{color:#7a8493;margin:0;font-size:12px}.tools{position:absolute;left:22px;top:144px;display:grid;gap:8px;z-index:3;padding:6px;background:#fff;border:1px solid #e2e5e9;border-radius:12px;box-shadow:0 6px 18px #10284e0d}.tools button{padding:10px;border:0}.viewport{position:absolute;inset:116px 0 60px;overflow:auto;touch-action:pan-x pan-y}.canvas{position:relative;width:1150px;height:640px;transform-origin:0 0}.node{position:absolute;text-align:left;width:180px;min-height:74px;padding:15px 18px;background:white;border:1px solid #d9dfe7;border-left:4px solid #b5a26a;border-radius:12px;box-shadow:0 6px 16px #10284e09}.node small{display:block;color:#8992a1;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:7px}.node strong{font-size:14px}.node.root{background:#10284e;color:white;border:0}.node.root small{color:#c6b681}.node.product{border-left-color:#1b3a6b}.node.selected{outline:3px solid #b5a26a66}.node.leaf{width:166px;min-height:65px}svg{position:absolute;inset:0;pointer-events:none}.detail{position:absolute;right:20px;bottom:80px;width:266px;background:white;box-shadow:0 10px 40px #10284e14;border:1px solid #dfe3e9;border-radius:14px;padding:20px;z-index:4}.detail h3{margin:5px 0 10px}.detail p{color:#6d788a;font-size:12px;line-height:1.7}.detail small{color:#a4915d;text-transform:uppercase;letter-spacing:1px}.detail button{font-size:12px}.bottom{position:absolute;bottom:18px;left:22px;right:22px;display:flex;align-items:center;gap:7px}.bottom span{font-size:11px;color:#7a8493;margin-left:auto}.search{width:100%;padding:11px;border:1px solid #dce1e7;border-radius:8px}.focus aside{display:none}.focus .detail{top:142px;bottom:auto}.focus .viewport{right:290px}.focus .canvas{width:1100px}.focus .heading{left:88px}.focus .tools{top:25px}.note{position:absolute;left:80px;top:540px;font-size:11px;color:#808896}#freebar{display:none;position:absolute;top:86px;right:22px;z-index:4}.free #freebar{display:block}.free .detail{display:none}@media(max-width:700px){header{height:120px;flex-wrap:wrap;gap:8px;padding:12px}.brand{font-size:19px}.tag{font-size:9px}nav{order:3;width:100%}nav button{flex:1;font-size:12px;padding:9px}.layout{height:calc(100dvh - 120px)}aside{display:none}.heading,.focus .heading{left:18px;top:20px}.heading h1{font-size:20px}.tools,.focus .tools{left:12px;top:95px}.detail{display:none}.focus .viewport{right:0}.viewport{inset:120px 0 60px}.bottom span{max-width:125px}#freebar{top:80px}}

body aside{display:block}body.menu-hidden aside{display:none}.viewport{inset:112px 0 64px}.canvas{width:2600px;height:5000px}.node{width:220px;min-height:75px;max-height:100px;overflow:hidden}.detail{top:130px;bottom:auto;max-height:65vh;overflow:auto;display:none}.detail.visible{display:block}.node small{font-size:10px}.tools{top:104px}.bottom{background:#fbfaf6e8;padding:6px;border-radius:9px}.bottom button{padding:8px}#results{font-size:12px;margin-top:12px;max-height:55vh;overflow:auto}#results button{font-size:12px;border:1px solid #e5e8ef}header .tag{max-width:240px}.heading{left:22px}.status{color:#7a8493;font-size:11px;max-width:220px}#nodeText{width:100%;padding:8px;margin:8px 0}#canvas svg{overflow:visible}.source{overflow-wrap:anywhere}@media(max-width:700px){body aside{position:absolute;z-index:10;left:0;top:120px;bottom:0;box-shadow:10px 0 30px #10284e20}header{gap:4px}header .tag{font-size:8px;max-width:120px}.detail{right:10px;top:110px;width:255px}.bottom{left:4px;right:4px;flex-wrap:wrap}.status{display:none}.heading h1{font-size:18px}nav button{padding:8px}}
#login{position:fixed;inset:0;z-index:99;background:#fbfaf6;display:flex;align-items:center;justify-content:center}#login[hidden]{display:none}.locked header,.locked .layout{display:none}#login form{width:min(400px,92vw);background:white;border-top:4px solid #b5a26a;border-radius:12px;padding:32px;box-shadow:0 12px 50px #10284e10}#login input,#login button{display:block;width:100%;margin:16px 0;padding:12px;border:1px solid #dce1e7;border-radius:8px}#login button{background:#1b3a6b;color:white}#loginError{color:#b42318;font-size:13px}.bottom{flex-wrap:wrap}.viewport{bottom:104px}

.node{cursor:pointer}.node.has-branches{padding-right:64px}.branch-actions{position:absolute;right:4px;top:11px;display:flex;gap:3px}.branch-actions button{width:26px;height:30px;padding:0;font-size:19px;line-height:26px;border-radius:5px}.node.root .branch-actions button{background:#1b3a6b;color:white;border-color:#697c98}.node:focus-visible{outline:3px solid #b5a26a}
/* Compact release: dense nodes, independent canvas zoom */
.node{height:54px;min-height:54px;max-height:54px;padding:6px 10px;border-radius:8px}.node small{font-size:9px;line-height:11px;margin-bottom:3px}.node strong{font-size:12px;line-height:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.viewport{touch-action:none}.detail select{width:100%;padding:8px;margin:8px 0}.detail button{margin:4px 2px}.heading h1{font-size:20px}.heading p{font-size:11px}