@layer components{.join-fragments-page .fragment-join{border-top:0;margin-top:0;padding-top:0}.join-fragments-page .fragment-join>.section-heading{display:none}.fragment-join{border-top:1px solid #dfe5f2;margin-top:36px;padding-top:24px}.fragment-join .section-heading{margin:0}.fragment-join .section-heading h2{margin:0;font-size:23px}.fragment-join .section-heading p{color:#7683a0;margin-top:7px;font-size:11px}.fragment-join .fragment-positions{grid-template-columns:repeat(8,minmax(0,1fr))}.fragment-join-export{color:#7683a0;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;font-size:11px;display:flex}.fragment-join-export input{border:1px solid #dce3f2;border-radius:5px;width:100px;margin-left:8px;padding:6px}.fragment-file-input{flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px;display:flex}.fragment-file-input>span,.fragment-file-input>small{color:#7b88a6;overflow-wrap:anywhere;font-size:10px}.fragment-file-input>small{flex-basis:100%}.fragment-file-input .error-box{flex-basis:100%;margin:0}.fragment-file-input .secondary-button{font-size:11px}.fragment-file-status{overflow-anchor:none;flex-basis:100%;min-width:0;height:34px;overflow:auto}.fragment-file-status small{white-space:nowrap;text-overflow:ellipsis;color:#7b88a6;font-size:10px;line-height:16px;display:block;overflow:hidden}.fragment-file-status p[role=alert]{color:#a44242;margin:0;font-size:10px;line-height:16px}.fragment-inputs{overflow-anchor:none;align-items:start}.fragment-fields{border:0;gap:18px;min-width:0;margin:0;padding:0;display:grid}.fragment-tool{color:var(--ink,#2c3c64);gap:18px;display:grid}.fragment-inputs,.fragment-results{grid-template-columns:1fr 1fr;gap:18px;min-width:0;display:grid}.fragment-panel{min-width:0;padding:22px}.fragment-panel-heading{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;display:flex}.fragment-panel-heading h2{margin:0;font-size:15px}.fragment-panel-heading>span:last-child:not(.fragment-step){color:#7b88a6;margin-left:auto;font-size:11px}.fragment-step{color:#526dbe;background:#edf1fb;border-radius:9px;place-items:center;width:28px;height:28px;font-size:10px;font-weight:800;display:grid}.fragment-panel textarea{resize:vertical;color:#2c3c64;letter-spacing:1px;background:#f8faff;border:1px solid #dce3f2;border-radius:9px;outline:none;width:100%;min-height:142px;padding:14px;font:600 16px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;transition:border-color .2s,box-shadow .2s;display:block}#fragment-value,#fragment-array,#join-input-head,#join-input-tail{field-sizing:fixed;resize:none;overscroll-behavior:contain;overflow-anchor:none;height:142px;min-height:142px;max-height:142px;overflow:auto}.fragment-panel textarea:focus{border-color:#8097d4;box-shadow:0 0 0 3px #edf1fb}.fragment-panel textarea::placeholder{color:#a0abc4;letter-spacing:0;font-weight:400}.fragment-panel p{color:#7683a0;margin:10px 0 0;font-size:11px;line-height:1.8}.fragment-length{color:#7683a0;margin-top:10px;font-size:11px}.fragment-length strong{color:#526dbe}.fragment-positions{grid-template-columns:repeat(15,minmax(0,1fr));gap:6px;margin-top:18px;display:grid}.fragment-positions button{color:#71809f;cursor:pointer;background:#f8faff;border:1px solid #dfe5f2;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:62px;transition:background .15s,border-color .15s,transform .15s;display:flex}.fragment-positions button:hover{border-color:#93a6d9;transform:translateY(-2px)}.fragment-positions button:focus-visible{outline-offset:3px;outline:2px solid #526dbe}.fragment-positions button strong{font-size:12px}.fragment-positions button span{color:#9ba7c1;font-size:13px;font-weight:800}.fragment-positions button.is-selected{color:#354e8b;background:#e8eefa;border-color:#8299d3}.fragment-positions button.is-selected span{color:#526dbe}.fragment-position-actions{flex-wrap:wrap;gap:20px;margin-top:9px;display:flex}.fragment-mapping{flex-wrap:wrap;gap:7px;margin:12px 0;display:flex}.fragment-mapping>span{color:#6f7d9d;background:#f1f4fb;border-radius:5px;padding:5px 8px;font-size:10px}.fragment-mapping b{color:#405caa;margin-left:7px}.fragment-run{border-top:1px solid #e8edf7;align-items:center;gap:16px;margin-top:14px;padding-top:17px;display:flex}.fragment-run .primary-button{white-space:nowrap;align-items:center;gap:8px;display:inline-flex}.fragment-run>span{color:#7d89a3;font-size:10px;line-height:1.7}.fragment-placeholder{color:#8a97b1;text-align:center;justify-content:center;align-items:center;gap:12px;padding:25px;font-size:12px;display:flex}.fragment-summary{flex-wrap:wrap;align-items:center;gap:14px;margin:3px 0 16px;font-size:12px;display:flex}.fragment-summary>span{color:#526dbe;background:#eaf0fc;border-radius:7px;padding:5px 10px;font-size:11px}.fragment-result{align-self:start;min-width:0;overflow:hidden}.fragment-result-heading{border-bottom:1px solid #e5ebf6;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:17px;display:flex}.fragment-result-heading h2{align-items:center;gap:7px;margin:0;font-size:14px;display:flex}.fragment-result-heading h2>span{background:#eff3fb;border-radius:6px;padding:3px 7px;font-size:10px}.fragment-result-heading .secondary-button{padding:8px 10px;font-size:10px}.fragment-result-scroll{max-height:440px;overflow:auto}.fragment-result table{border-collapse:collapse;text-align:left;width:100%}.fragment-result th{color:#8490ab;background:#f7f9fd;padding:10px 14px;font-size:10px;position:sticky;top:0}.fragment-result td{color:#8b96ad;border-top:1px solid #edf0f7;padding:8px 14px;font-size:10px}.fragment-result td:first-child{width:60px}.fragment-result code{white-space:nowrap;color:#73809c;gap:2px;font-size:13px;font-weight:650;display:inline-flex}.fragment-result code>span{text-align:center;border-radius:3px;min-width:15px;padding:3px 1px;display:inline-block}.fragment-result .fragment-selected-value{color:#a36565;background:#f3e4e4}.fragment-matched .fragment-selected-value{color:#548367;background:#e3f0e8}.fragment-empty{text-align:center;color:#8490aa;padding:38px 18px;font-size:12px}.fragment-result .fragment-export-note{color:#8a96b0;border-top:1px solid #edf0f7;margin:0;padding:12px 16px;font-size:10px;line-height:1.7}.fragment-pagination{color:#6e7ea3;justify-content:center;align-items:center;gap:12px;padding:9px;font-size:11px;display:flex}@media (max-width:1100px){.fragment-positions{grid-template-columns:repeat(8,minmax(0,1fr))}.fragment-results{grid-template-columns:1fr}}@media (max-width:650px){.fragment-inputs{grid-template-columns:1fr}.fragment-panel{padding:16px}.fragment-positions{grid-template-columns:repeat(5,minmax(0,1fr))}.fragment-run{flex-direction:column;align-items:flex-start;gap:10px}.fragment-panel-heading h2{font-size:14px}.fragment-result td,.fragment-result th{padding:8px}.fragment-result code{gap:0;font-size:12px}.fragment-result code>span{min-width:13px}.fragment-placeholder{padding:14px 4px;font-size:11px}}@media (prefers-reduced-motion:reduce){.fragment-positions button,.fragment-panel textarea{transition:none}.fragment-positions button:hover{transform:none}}.fragment-count-actions>.fragment-clear-button{color:#6c8297;cursor:pointer;background:#f5f8fa;border:1px solid #c7d4df;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;gap:5px;padding:5px 7px;font-size:10px;line-height:16px;display:inline-flex}.fragment-count-actions>.fragment-clear-button:disabled{opacity:.4;cursor:default}.fragment-count-actions>.fragment-clear-button:hover:not(:disabled){background:#e7eef4}.fragment-clear-button svg{flex-shrink:0}.fragment-count-actions{justify-content:space-between;align-items:center;gap:8px;min-height:30px;display:flex}.fragment-count-actions>span{min-width:0}.fragment-count-actions>.fragment-clear-button{margin-left:auto}.fragment-count-actions>.fragment-clear-button svg{display:block}}