*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;flex-direction:column;height:100vh;background:#f5f5f5}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#24292f;color:#fff}.app-header h1{margin:0;font-size:18px;font-weight:600}.view-filename{font-size:12px;color:#666;margin:8px 0 0;word-break:break-all}.error-banner{padding:12px 20px;background:#ffebe9;color:#82071e;border-bottom:1px solid #cf222e}.app-content{display:flex;flex:1;overflow:hidden}.app-sidebar{width:320px;background:#fff;border-right:1px solid #ddd;overflow-y:auto;padding:16px}.app-main{flex:1;background:#e0e0e0;overflow:hidden;display:flex}.app-comments{width:300px;background:#fafafa;border-left:1px solid #ddd;overflow-y:auto}.preview-container{flex:1;display:flex;position:relative;margin:20px}.preview-iframe{width:100%;max-width:720px;margin:0 auto;border:none;background:#fff;box-shadow:0 2px 10px #0000001a}.preview-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;text-align:center}.preview-empty p{margin:4px 0}.capture-button{position:absolute;top:8px;right:8px;padding:6px 12px;font-size:11px;font-weight:600;background:#fffffff2;border:1px solid #ccc;border-radius:4px;cursor:pointer;opacity:.7;transition:opacity .2s;z-index:10}.capture-button:hover{opacity:1;background:#fff}.pipeline{display:flex;flex-direction:column;gap:16px}.step-panel{border:1px solid #ddd;border-radius:8px;overflow:hidden}.step-panel.inactive{opacity:.6}.step-header{padding:12px;background:#f6f8fa;border-bottom:1px solid #ddd}.step-title{margin:0 0 4px;font-size:14px;font-weight:600}.step-description{font-size:12px;color:#666;font-family:monospace}.step-content{padding:12px}.step-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.file-inputs{display:flex;flex-direction:column;gap:8px}.file-input{padding:12px;border:2px dashed #ddd;border-radius:6px;cursor:pointer;transition:all .2s}.file-input:hover{border-color:#0969da;background:#f6f8fa}.file-input.dragging{border-color:#0969da;background:#ddf4ff}.file-input.disabled{opacity:.5;cursor:not-allowed}.file-input-label{font-size:12px;font-weight:600;color:#24292f;margin-bottom:4px}.file-input-filename{font-size:12px;color:#666;word-break:break-all}button{padding:6px 12px;font-size:12px;font-weight:500;border:1px solid #d0d7de;border-radius:6px;background:#f6f8fa;color:#24292f;cursor:pointer;transition:all .2s}button:hover:not(:disabled){background:#f3f4f6;border-color:#1b1f2326}button:disabled{opacity:.5;cursor:not-allowed}.debug-log{display:flex;flex-direction:column;gap:2px;font-family:monospace;font-size:11px}.debug-log-entry{display:flex;justify-content:space-between;gap:8px;padding:2px 0}.debug-log-label{color:#666;white-space:nowrap}.debug-log-value{color:#24292f;font-weight:500;text-align:right}.debug-log-entry-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.debug-log-entry-clickable:hover{background:#f6f8fa}.debug-section-list{display:flex;flex-direction:column;gap:1px;margin:4px 0 4px 12px;border-left:2px solid #ddd;padding-left:8px}.debug-section-item{display:flex;flex-direction:column;gap:1px;padding:4px 6px;border-radius:4px;cursor:pointer;font-family:monospace;font-size:11px;transition:background .15s}.debug-section-item:hover{background:#f0f6ff}.debug-section-item.active{background:#ddf4ff;outline:1px solid #0969da}.debug-section-label{font-weight:600;color:#24292f}.debug-section-stats{color:#666}.debug-section-preview{color:#888;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.debug-para-list{display:flex;flex-direction:column;gap:1px;margin:2px 0 2px 12px;border-left:2px solid #e5e7eb;padding-left:6px}.debug-para-item{padding:2px 5px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:10px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s}.debug-para-item:hover{background:#fef9ee}.debug-para-item.active{background:#fef3c7;outline:1px solid #d97706;color:#92400e}.debug-para-item .para-type{color:#999;font-style:italic}.debug-table-item{padding:3px 5px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:10px;color:#0969da;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s;border-left:2px solid #0969da;-webkit-user-select:none;user-select:none}.debug-table-item:hover{background:#f0f6ff}.debug-cell-item{padding:2px 5px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:10px;color:#6f42c1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s;border-left:2px solid #6f42c1;-webkit-user-select:none;user-select:none}.debug-cell-item:hover{background:#f5f0ff}.comments-sidebar{padding:16px}.comments-sidebar h2{margin:0 0 16px;font-size:12px;text-transform:uppercase;color:#666;letter-spacing:1px}.no-comments{color:#999;font-style:italic;text-align:center;padding:20px}.comment-card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:12px;margin-bottom:12px;cursor:pointer;transition:all .2s}.comment-card:hover{border-color:#d4a72c;box-shadow:0 2px 8px #0000001a}.comment-card.active{border-color:#d4a72c;background:#fffbeb}.comment-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.comment-author{font-weight:600;font-size:13px;color:#333}.comment-date{font-size:11px;color:#888}.comment-selection{font-size:12px;color:#666;font-style:italic;background:#f5f5f5;border-left:2px solid #d4a72c;padding:3px 8px;margin:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comment-text{font-size:13px;color:#555}.comment-resolved{font-size:11px;color:#16a34a;font-weight:600;margin-top:4px}.para-tag{display:inline-block;font-family:monospace;font-size:9px;padding:0 3px;margin-left:4px;border-radius:3px;vertical-align:baseline;line-height:1.4}.tag-style{background:#e5e7eb;color:#4b5563}.tag-img{background:#d1fae5;color:#065f46}.tag-bmk{background:#ffedd5;color:#9a3412}.tag-cmt{background:#dbeafe;color:#1e40af}.debug-hf-item{padding:3px 5px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:10px;color:#0d9488;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s;border-left:2px solid #0d9488;-webkit-user-select:none;user-select:none}.debug-hf-item:hover{background:#f0fdfa}.debug-summary-item{display:flex;align-items:baseline;gap:6px;padding:3px 6px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s;border-left:2px solid transparent;-webkit-user-select:none;user-select:none}.debug-summary-item:hover{background:#f6f8fa}.debug-summary-item.active{background:#fef3c7;outline:1px solid #d97706}.debug-summary-name{font-weight:600;color:#24292f}.debug-summary-count{color:#666;font-weight:400}.debug-summary-preview{color:#888;font-style:italic;overflow:hidden;text-overflow:ellipsis}.debug-summary-subtitle{font-family:monospace;font-size:9px;color:#888;font-style:italic;padding:0 0 2px 16px}.debug-summary-comment{color:#6b7280;font-style:italic;overflow:hidden;text-overflow:ellipsis}.summary-style{border-left-color:#6b7280}.summary-style .debug-summary-name{color:#4b5563}.summary-bmk{border-left-color:#d97706}.summary-bmk .debug-summary-name{color:#9a3412}.summary-cmt{border-left-color:#2563eb}.summary-cmt .debug-summary-name{color:#1e40af}.summary-img{border-left-color:#059669}.summary-img .debug-summary-name{color:#065f46}