*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}h1,h2,h3{color:#333}.container{max-width:1200px;margin:0 auto;background:#fff;border-radius:10px;box-shadow:0 10px 40px #0003;padding:15px}.theme-dropdown{width:100%;padding:12px 15px;font-size:16px;border:2px solid #667eea;border-radius:5px;background:#fff;cursor:pointer;color:#333;font-weight:500}.theme-dropdown:focus{outline:none;border-color:#5568d3;box-shadow:0 0 0 3px #667eea1a}.theme-dropdown option{padding:10px}.chunk-card{background:#fff;border:1px solid #e0e0e0;border-left:4px solid #667eea;border-radius:5px;padding:20px;margin-bottom:20px;box-shadow:0 2px 5px #0000000d;transition:transform .2s,box-shadow .2s}.chunk-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px #0000001a}.chunk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #f0f0f0}.chunk-index,.chunk-distance{font-size:14px;color:#666;background:#f5f5f5;padding:4px 10px;border-radius:3px}.chunk-meta{margin-bottom:15px;color:#555;font-size:14px}.meta-item{margin:5px 0}.chunk-text{line-height:1.8;color:#333;padding:15px;background:#f9f9f9;border-radius:5px;white-space:pre-wrap;word-wrap:break-word}.tabs{display:flex;gap:10px;margin:20px 0;border-bottom:2px solid #e0e0e0}.tab-button{padding:12px 24px;font-size:16px;font-weight:500;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;color:#666;transition:all .3s}.tab-button:hover{color:#667eea;background:#f5f5f5}.tab-button.active{color:#667eea;border-bottom-color:#667eea;font-weight:600}.tab-content{margin-top:20px}.table-container{overflow-x:auto;border-radius:5px;box-shadow:0 2px 8px #0000001a}.chunks-table{width:100%;border-collapse:collapse;background:#fff}.chunks-table thead{background:#667eea;color:#fff}.chunks-table th{padding:15px;text-align:left;font-weight:600;position:sticky;top:0;z-index:10}.chunks-table tbody tr{border-bottom:1px solid #e0e0e0;transition:background .2s}.chunks-table tbody tr:hover{background:#f5f5f5}.chunks-table td{padding:12px 15px;vertical-align:top}.chunk-id-col{font-weight:700;color:#667eea;white-space:nowrap}.doc-col,.para-col{min-width:200px}.doc-col strong,.para-col strong{color:#333}.doc-col small,.para-col small{color:#666;font-size:12px}.index-col,.distance-col{text-align:center;white-space:nowrap}.text-col{max-width:400px;line-height:1.6;color:#555}.diagram-container{padding:20px;background:#fff;border-radius:5px;box-shadow:0 2px 8px #0000001a}.doc-para-group{margin-bottom:40px;padding:20px;background:#f9f9f9;border-radius:8px;border-left:5px solid #667eea;box-shadow:0 2px 5px #0000000d}.document-header{font-size:18px;color:#667eea;margin-bottom:12px;padding:12px;background:#fff;border-radius:5px;border-left:4px solid #764ba2}.document-header strong{font-size:20px}.group-label{font-weight:700;font-size:15px;color:#555;margin-bottom:18px;padding:10px 12px;background:#fff;border-radius:5px}.chunks-bars-wrapper{position:relative}.chunks-bars{display:flex;flex-direction:column;gap:0}.chunk-bar-container{display:flex;flex-direction:column;align-items:flex-start}.chunk-bar{min-width:150px;min-height:50px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:6px;display:flex;flex-direction:column;justify-content:center;padding:8px 15px;transition:transform .2s,box-shadow .2s;cursor:pointer;position:relative;margin-bottom:0}.chunk-bar:hover{transform:translate(8px) scale(1.02);box-shadow:0 4px 15px #667eea80;z-index:10}.chunk-connector{display:flex;flex-direction:column;align-items:center;width:100%;margin:5px 0}.connector-line{width:3px;height:20px;background:linear-gradient(180deg,#667eea,#764ba2);border-radius:2px}.connector-arrow{color:#764ba2;font-size:16px;font-weight:700;margin-top:-5px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.chunk-bar-id{color:#fff;font-weight:700;font-size:13px;margin-bottom:4px}.chunk-bar-text{color:#fffffff2;font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.flowchart-container-full{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px #0000001a;height:calc(100vh - 250px);overflow:auto;display:flex;flex-direction:column}.flowchart-container-full.maximized{position:fixed!important;top:0;left:0;width:100vw;height:100vh;z-index:9999;border-radius:0;padding:10px;margin:0;box-shadow:none}.flowchart-controls{margin-bottom:15px;padding:15px;background:#f5f5f5;border-radius:5px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.chunk-info{font-size:15px;color:#667eea;font-weight:600;margin:0}.chunk-info:before{content:"\1f4a1  "}.zoom-controls{display:flex;align-items:center;gap:10px}.zoom-btn{padding:6px 12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s}.zoom-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #667eea4d}.zoom-btn:disabled{opacity:.5;cursor:not-allowed}.zoom-level{font-weight:700;color:#667eea;min-width:50px;text-align:center}.flowchart-scroll{overflow:auto;flex:1;transform-origin:top center;transition:transform .3s ease;padding:20px}.canvas-viewport{flex:1;overflow:auto;position:relative;background:#e5e7eb;border-radius:8px;-webkit-user-select:none;user-select:none;min-height:1200px}.canvas-content{position:relative;transform-origin:top left;transition:transform .1s ease-out;will-change:transform;min-width:3000px;min-height:3000px;padding:50px}.document-hub-view{display:flex;flex-direction:column;gap:50px;background:transparent;padding:30px 15px;border-radius:8px;min-height:100%}.document-hub-group{position:relative;width:100%;min-height:2000px;margin-bottom:50px}.document-node,.chunk-node{position:absolute;transform:translate(-50%,-50%);cursor:grab;z-index:10;transition:box-shadow .2s ease}.document-node:hover,.chunk-node:hover{z-index:20;box-shadow:0 8px 30px #667eea99}.document-node:active,.chunk-node:active{cursor:grabbing}.document-bar-positioned{position:absolute;z-index:10}.document-bar-gummy{background:linear-gradient(135deg,#667eea,#764ba2);padding:15px 40px;border-radius:40px;box-shadow:0 8px 25px #667eea80;text-align:center;color:#fff;width:350px;position:relative;animation:float 4s ease-in-out infinite}.document-bar-gummy:before{content:"";position:absolute;inset:-4px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:44px;z-index:-1;opacity:.5;filter:blur(12px)}.document-bar-gummy h3{margin:0 0 6px;font-size:18px;font-weight:700}.paragraph-node-box{background:linear-gradient(135deg,#48bb78,#38a169);padding:10px 25px;border-radius:25px;box-shadow:0 6px 20px #48bb7866;text-align:center;color:#fff;min-width:200px;position:relative}.paragraph-node-box h4{margin:0 0 4px;font-size:14px;font-weight:700}.para-subtitle{margin:0 0 6px;font-size:10px;opacity:.9}.para-chunk-count{display:inline-block;background:#ffffff4d;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:600}.doc-subtitle{margin:0 0 8px;font-size:11px;opacity:.9}.chunk-count{display:inline-block;background:#ffffff4d;padding:4px 12px;border-radius:18px;font-size:10px;font-weight:700}.chunks-container{position:relative;min-height:2000px;width:100%;z-index:2}.chunk-draggable{-webkit-user-select:none;user-select:none;transition:box-shadow .2s ease}.chunk-draggable:hover{box-shadow:0 8px 25px #667eea66;transform:translateY(-2px)}.chunk-draggable:active{box-shadow:0 4px 15px #667eea99;opacity:.8}.gummy-chunk-line{stroke-dasharray:5,3;opacity:.6}.gummy-para-line{stroke-dasharray:8,4;opacity:.3}.chunk-with-connector{position:relative;display:flex;justify-content:center}.star-connections-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}.gummy-doc-line{stroke-dasharray:15,8;animation:gummyFlow 4s linear infinite,gummyPulse 2s ease-in-out infinite}.gummy-star-line{stroke-dasharray:10,5;animation:gummyFlow 4s ease-in-out infinite,gummyPulse 2s ease-in-out infinite}@keyframes gummyFlow{0%,to{stroke-dashoffset:0}50%{stroke-dashoffset:30}}@keyframes gummyPulse{0%,to{stroke-width:2;opacity:.6}50%{stroke-width:3;opacity:.9}}@keyframes dash{to{stroke-dashoffset:-18}}@keyframes glow{0%,to{opacity:.6}50%{opacity:1}}.chunk-box-compact{width:140px;min-height:150px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;padding:8px;color:#fff;box-shadow:0 3px 10px #667eea66;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);position:relative;animation:float 3s ease-in-out infinite}.chunk-box-compact:nth-child(2n){animation-delay:-1s}.chunk-box-compact:nth-child(3n){animation-delay:-2s}.chunk-box-compact:before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:17px;z-index:-1;opacity:0;transition:opacity .3s}.chunk-box-compact:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 6px 20px #667eea99}.chunk-box-compact:hover:before{opacity:.6;filter:blur(8px)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.chunk-header-compact{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.chunk-id-badge{background:#ffffff4d;padding:2px 6px;border-radius:8px;font-weight:700;font-size:9px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.chunk-para{background:#ffffff40;padding:2px 5px;border-radius:8px;font-size:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.chunk-para-title-compact{font-weight:600;margin-bottom:5px;font-size:10px;color:#fffffff2;min-height:24px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.chunk-text-compact{background:#fff3;padding:5px;border-radius:8px;margin-bottom:5px;font-size:9px;line-height:1.3;height:60px;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.chunk-meta-compact{display:flex;justify-content:space-between;font-size:8px;color:#ffffffd9;font-weight:500}.loading{text-align:center;font-size:18px;color:#667eea;margin:20px 0}.error{color:#d32f2f;background:#ffebee;padding:15px;border-radius:5px;margin:20px 0}.stats{display:flex;justify-content:space-around;margin:10px 0;padding:10px;background:#f5f5f5;border-radius:5px}.stat-item{text-align:center}.stat-number{font-size:24px;font-weight:700;color:#667eea}.stat-label{font-size:14px;color:#666;margin-top:5px}.theme-details{margin-top:30px;padding:20px;background:#f9f9f9;border-radius:5px;border-left:4px solid #667eea}.theme-details h3{color:#667eea;margin-bottom:15px}.detail-row{margin:10px 0;display:flex;gap:10px}.detail-label{font-weight:700;color:#555;min-width:150px}.detail-value{color:#333}.btn{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px;margin:10px 5px}.btn:hover{background:#5568d3}.btn:disabled{background:#ccc;cursor:not-allowed}.chunks-container{margin-top:20px}.chunk-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s}.chunk-card:hover{box-shadow:0 4px 12px #667eea33}.chunk-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:2px solid #667eea;margin-bottom:15px}.chunk-number{font-weight:700;color:#667eea;font-size:18px}.chunk-distance{color:#888;font-size:13px;font-family:monospace}.chunk-meta{background:#f9f9f9;padding:12px;border-radius:5px;margin-bottom:15px}.meta-item{margin:8px 0;color:#555;font-size:14px}.meta-item strong{color:#333;margin-right:8px}.chunk-text{line-height:1.8;color:#333;padding:15px;background:#fafafa;border-left:4px solid #667eea;border-radius:4px;white-space:pre-wrap;word-wrap:break-word}.info{background:#e3f2fd;color:#1976d2;padding:15px;border-radius:5px;margin:20px 0;text-align:center}.chunks-container{max-height:600px;overflow-y:auto;border:1px solid #ddd;border-radius:5px;padding:10px;background:#fafafa}.chunk-card{background:#fff;border:1px solid #e0e0e0;border-radius:5px;padding:15px;margin-bottom:15px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .3s ease}.chunk-card:hover{box-shadow:0 4px 8px #667eea33;border-color:#667eea}.chunk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid #667eea}.chunk-number{font-weight:700;color:#667eea;font-size:16px}.chunk-index{color:#666;font-size:14px}.chunk-distance{background:#f0f0f0;padding:4px 8px;border-radius:3px;font-size:12px;color:#555}.chunk-meta{margin-bottom:12px;padding:10px;background:#f9f9f9;border-radius:3px}.meta-item{margin:5px 0;font-size:14px;color:#555}.meta-item strong{color:#333;margin-right:5px}.chunk-text{line-height:1.6;color:#333;padding:10px;background:#fff;border-left:3px solid #667eea;white-space:pre-wrap;word-wrap:break-word}.chunk-tooltip{position:fixed;background:#fff;border:2px solid #667eea;border-radius:8px;box-shadow:0 4px 20px #0000004d;padding:0;z-index:10000;max-width:500px;min-width:350px;animation:tooltipFadeIn .2s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.tooltip-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 15px;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:14px}.tooltip-close{cursor:pointer;font-size:24px;line-height:1;font-weight:700;opacity:.8;transition:opacity .2s}.tooltip-close:hover{opacity:1}.tooltip-content{padding:15px;max-height:400px;overflow-y:auto}.tooltip-row{display:flex;margin-bottom:8px;font-size:13px;gap:10px}.tooltip-label{font-weight:600;color:#667eea;min-width:80px;flex-shrink:0}.tooltip-value{color:#333;flex:1}.tooltip-text{margin-top:12px;padding-top:12px;border-top:1px solid #e0e0e0}.tooltip-text-content{background:#f9f9f9;padding:10px;border-radius:5px;font-size:12px;line-height:1.6;color:#444;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;border-left:3px solid #667eea}