.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;padding:24px 28px;height:100dvh;min-height:600px}
.pane{display:flex;flex-direction:column;position:relative;min-width:0;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--panel-radius);corner-shape:var(--corner);overflow:hidden}
.output-pane{container-type:inline-size}
.pane-head{display:flex;align-items:center;gap:16px;min-height:70px;height:70px;padding:16px 24px;flex-shrink:0;border-bottom:1px solid #eeeef2}
.pane-head>label{position:relative;flex-shrink:0;font-size:13px;font-weight:400;color:var(--secondary)}
.pane-head>label:after{content:"";position:absolute;bottom:-25px;left:0;width:24px;height:2px;background:#f5abc0;border-radius:2px}
.pane-head .import{margin-left:auto;height:34px;min-width:34px;padding:0 14px;font-size:12px}.import svg{width:16px;height:16px}
.filename{font-size:11px;color:var(--muted);min-width:0;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.total-count{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.segmented{display:inline-flex;flex-shrink:0;gap:1px;padding:3px;border-radius:999px;corner-shape:round;background:#e9e9ee}
.segmented button{min-width:47px;height:28px;padding:0 14px;border-radius:999px;corner-shape:round;font-size:12px;font-weight:400;color:var(--secondary);transition:background-color .18s,color .18s,transform .15s}
.segmented button[aria-pressed=true]{background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}.segmented button:hover:not(:disabled){color:var(--ink)}.segmented button:active:not(:disabled){transform:scale(.96)}.segmented button:disabled{opacity:.4}
.preview-body{display:flex;flex:1;min-height:0;min-width:0}
textarea{width:100%;flex:1;min-width:0;min-height:0;resize:none;border:0;border-radius:0;background:transparent;padding:24px 25px 28px;outline:none;color:#383b45;font-family:inherit;line-height:1.95;font-size:15px;tab-size:2;white-space:pre-wrap;overflow-wrap:break-word;scrollbar-width:thin;scrollbar-color:#c9cbd4 transparent}
textarea::placeholder{color:#a3a6b0;font-size:14px;line-height:2.1}#output.stale{opacity:.4}
.input-footer{display:flex;align-items:center;min-height:45px;padding:8px 24px 14px;flex-shrink:0}.inline-action{padding:5px 0;font-size:11px;color:var(--muted)}.inline-action:hover{color:var(--ink)}
.part-nav{padding:16px 24px 0;flex-shrink:0}.part-tabs{display:flex;align-items:center;gap:6px}
.part-tab{min-width:0;padding:7px 13px;border-radius:999px;background:var(--control);color:var(--secondary);font-size:12px;white-space:nowrap;transition:background-color .15s,color .15s,transform .15s}
.part-tab:hover:not(:disabled){background:var(--control-hover)}.part-tab[aria-selected=true],.part-tab[aria-selected=true]:hover{background:#ffe5ee;color:var(--accent-text)}.part-tab:active:not(:disabled){transform:scale(.96)}.part-tab:disabled{opacity:.45}
.part-range{display:block;margin-top:11px;color:var(--muted);font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums}
.part-nav:not([hidden])+.preview-body textarea{padding-top:15px}
.part-jump{display:flex;align-items:center;gap:8px}.nav-arrow{width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;background:var(--control);border-radius:50%;color:var(--secondary);transition:background-color .15s,transform .15s}
.nav-arrow svg{width:15px;height:15px}.nav-arrow:hover:not(:disabled){background:var(--control-hover);color:var(--ink)}.nav-arrow:disabled{opacity:.35}.nav-arrow:active:not(:disabled){transform:scale(.95)}
.part-picker{position:relative}.part-picker-button{display:flex;align-items:center;justify-content:center;gap:14px;height:31px;min-width:144px;padding:0 13px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font-size:12px;font-variant-numeric:tabular-nums}
.part-picker-button svg{width:15px;height:15px;color:var(--muted)}.part-picker-button:hover:not(:disabled),.part-picker-button[aria-expanded=true]{border-color:#e7acbe;background:#fff8fa}.part-picker-button:disabled{opacity:.45}
.popover{position:absolute;z-index:10;padding:8px;border:1px solid var(--line-strong);border-radius:18px;background:#fff;box-shadow:0 7px 22px #25263612;animation:popover-in .14s ease-out;transform-origin:top center}
.part-grid-popover{top:calc(100% + 12px);left:0;width:318px;padding:12px}
.part-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;max-height:min(288px,40vh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d3d3dc transparent;padding:3px}
.part-grid button{height:30px;min-width:0;padding:0 3px;border-radius:999px;background:var(--well);color:var(--secondary);font-size:12px;font-variant-numeric:tabular-nums}
.part-grid button:hover:not(:disabled){background:var(--control-hover);color:var(--ink)}.part-grid button[aria-pressed=true],.part-grid button[aria-pressed=true]:hover{background:#ffe5ee;color:var(--accent-text)}.part-grid button:disabled{opacity:.4}
.part-grid-range{display:block;margin:11px 4px 1px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;line-height:1.5}
.output-dock{position:relative;margin:0 12px 12px;padding:12px;border-radius:var(--well-radius);corner-shape:var(--corner);background:var(--well-soft);border:1px solid #eeeef2;flex-shrink:0}
.output-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
.split-control{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--secondary);white-space:nowrap;flex-shrink:0}
.number-stepper{display:flex;align-items:center;height:34px;overflow:hidden;border:1px solid #dedee7;border-radius:12px;background:var(--well)}
.number-stepper:focus-within{border-color:var(--accent)}.number-stepper:has(input[aria-invalid=true]){border-color:var(--danger)}
.step-button{display:grid;place-items:center;width:31px;height:32px;padding:0;color:var(--secondary);transition:background-color .15s}.step-button svg{width:15px;height:15px}.step-button:hover:not(:disabled){background:var(--control-hover);color:var(--ink)}.step-button:disabled{opacity:.32}
.number-stepper input{appearance:textfield;-moz-appearance:textfield;width:40px;min-width:0;height:32px;padding:0 2px;border:0;outline:none;border-radius:0;background:#fff;color:var(--ink);font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.number-stepper input::-webkit-inner-spin-button,.number-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-stepper input:disabled{background:transparent;color:var(--muted)}
.number-stepper .step-button:focus-visible{outline-offset:-4px}.number-stepper input:focus-visible{outline:0}
.output-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.output-actions .btn{height:38px;padding:0 15px;font-size:12px}.output-actions svg{width:16px;height:16px}.output-actions .copy-button{border:1px solid #e0e0e7;background:#ededf2}.output-actions .copy-button:hover:not(:disabled){background:#e5e5ed}
.download-group{position:relative;display:flex;align-items:stretch;border-radius:999px;background:var(--accent-fill)}.download-group:has(#download:disabled){background:#ffdae4}
.download-group .btn.primary:disabled{opacity:1;background:transparent;color:#a9818d}.download-group .btn.primary{border-radius:999px}.download-group:has(.download-toggle:not([hidden])) .btn.primary{border-radius:999px 0 0 999px;padding-right:13px}
.download-toggle{display:grid;place-items:center;position:relative;width:32px;flex-shrink:0;border-radius:0 999px 999px 0;background:var(--accent-fill);color:var(--ink);transition:background-color .15s}.download-toggle:before{content:"";position:absolute;top:10px;bottom:10px;left:0;width:1px;background:#c5517540}
.download-toggle:hover:not(:disabled),.download-toggle[aria-expanded=true]{background:var(--accent-hover)}.download-toggle:disabled{background:transparent;color:#a9818d}.download-toggle svg{width:16px;height:16px}
.download-menu{bottom:calc(100% + 12px);right:0;width:252px;padding:6px;transform-origin:bottom right}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 10px;border-radius:12px;text-align:left;font-size:12px;color:var(--ink);white-space:nowrap}
.menu-item+ .menu-item{border-top:1px solid var(--line);border-radius:0 0 12px 12px}.menu-item:hover,.menu-item:focus-visible{background:var(--well);outline:none}.menu-item svg{width:17px;height:17px;color:var(--secondary)}.menu-item small{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono)}.menu-item:disabled{opacity:.4}
.output-status{margin:10px 1px 0;line-height:1.6}.output-status.error{color:var(--danger)}
.drop-overlay{position:absolute;inset:12px;display:grid;place-content:center;justify-items:center;gap:14px;border:1.5px dashed var(--accent-text);border-radius:var(--well-radius);corner-shape:var(--corner);background:#fff3f7;color:var(--accent-text);font-size:14px;z-index:5;pointer-events:none}.drop-overlay svg{width:30px;height:30px}
@keyframes popover-in{from{opacity:0;transform:translateY(-3px) scale(.98)}to{opacity:1;transform:none}}
@container(max-width:570px){.output-actions .copy-button{width:36px;min-width:36px;padding:0}.copy-label{display:none}.split-control{gap:7px}.output-tools{gap:8px}.output-actions .btn{padding-left:12px;padding-right:12px}.output-actions .copy-button{padding:0}}
@container(max-width:440px){.part-nav{padding-left:18px;padding-right:18px}.part-tab{padding:7px 9px;font-size:11px}.part-tabs{gap:5px}.output-dock{padding:10px;margin:0 10px 10px}.split-control{gap:6px;font-size:11px}.step-button{width:28px}.number-stepper input{width:32px}.download-group .btn.primary{padding-left:10px}.download-group:has(.download-toggle:not([hidden])) .btn.primary{padding-right:9px}.download-toggle{width:28px}.output-actions{gap:7px}.output-actions .btn{font-size:11px}.part-grid-popover{width:290px}.part-picker-button{min-width:132px}}
@media(max-width:1200px){.workspace{padding:20px;gap:18px}.pane-head{padding:15px 20px;gap:12px}.filename{max-width:36%}textarea{padding:23px 21px}.input-footer{padding-left:20px}}