.splitter-page { padding-bottom: 42px; }
.splitter-page .breadcrumbs { margin: 14px 0 10px; }
.splitter-tool { display: grid; grid-template-columns: minmax(310px, 360px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.splitter-controls,
.splitter-preview { border: 2px solid var(--line); background: rgba(255, 250, 242, 0.96); box-shadow: var(--shadow); }
.splitter-controls { padding: 14px; display: grid; align-content: start; gap: 10px; }
.splitter-controls h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
.splitter-lede { margin: 0; color: var(--muted); line-height: 1.45; }
.panel-file-input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.splitter-dropzone { padding: 10px; display: grid; gap: 3px; border: 1px dashed var(--line); background: #fff; cursor: pointer; text-align: center; }
.splitter-dropzone span { color: var(--muted); font-size: .76rem; }
.splitter-dropzone.is-dragging { border-color: var(--accent); background: #fff4df; }
.splitter-controls fieldset { min-width: 0; margin: 0; padding: 9px; display: grid; gap: 8px; border: 1px solid rgba(21,21,21,.38); }
.splitter-controls legend { padding: 0 5px; color: var(--green); font: 800 .72rem/1.2 "Courier New", monospace; letter-spacing: .05em; text-transform: uppercase; }
.splitter-presets { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
.splitter-presets button,
.splitter-formats button { min-width: 0; padding: 7px 5px; display: grid; gap: 2px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.splitter-presets button[aria-pressed="true"],
.splitter-formats button[aria-pressed="true"] { background: var(--yellow); box-shadow: inset 0 -3px 0 var(--accent); }
.splitter-presets span,
.splitter-formats span { color: var(--muted); font-size: .66rem; }
.splitter-dimensions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.splitter-dimensions label { display: grid; gap: 3px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.splitter-dimensions input { width: 100%; height: 34px; padding: 4px 8px; border: 1px solid var(--line); background: #fff; }
.splitter-formats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.splitter-formats button { padding: 8px; text-align: left; }
.splitter-slider { display: grid; grid-template-columns: 112px minmax(0,1fr) 42px; align-items: center; gap: 7px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.splitter-slider input { width: 100%; accent-color: var(--accent); }
.splitter-slider output { color: var(--ink); font-family: "Courier New", monospace; text-align: right; }
.control-note { margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.splitter-export-row { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10px; }
.splitter-export-row label { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.splitter-export-row select { height: 34px; padding: 4px 7px; border: 1px solid var(--line); background: #fff; }
.splitter-export-row input { width: 100%; accent-color: var(--accent); }
.splitter-export-row output { margin-left: 6px; color: var(--ink); font-family: "Courier New", monospace; }
.splitter-preview { min-height: 690px; padding: 12px; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; gap: 10px; }
.splitter-preview-head { padding-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(21,21,21,.18); }
.splitter-preview-head > div:first-child { display: grid; gap: 3px; }
.splitter-preview-head #splitterStatus { color: var(--muted); font-size: .76rem; }
.splitter-canvas-wrap { min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; background: repeating-conic-gradient(#dfe6e2 0 25%, #edf2ef 0 50%) 50%/24px 24px; }
.splitter-canvas-wrap canvas { display: block; max-width: calc(100% - 28px); max-height: 510px; width: auto; height: auto; background: #d9dedb; filter: drop-shadow(0 13px 22px rgba(21,21,21,.18)); cursor: crosshair; }
.splitter-empty { position: absolute; left: 50%; top: 50%; width: min(78%, 360px); padding: 18px; display: grid; gap: 5px; transform: translate(-50%,-50%); border: 1px dashed var(--line); background: rgba(255,250,242,.96); text-align: center; }
.splitter-empty[hidden] { display: none; }
.splitter-empty span { color: var(--muted); font-size: .78rem; }
.post-order { min-height: 66px; display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 10px; align-items: center; }
.post-order > div { display: grid; gap: 3px; }
.post-order span { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.post-order ol { min-width: 0; margin: 0; padding: 0 0 3px; display: flex; gap: 5px; overflow-x: auto; list-style: none; }
.post-order button { width: 52px; height: 58px; position: relative; padding: 0; overflow: hidden; border: 2px solid transparent; background: #e7ece9; cursor: pointer; }
.post-order button[aria-pressed="true"] { border-color: var(--accent); }
.post-order canvas { width: 100%; height: 100%; object-fit: cover; }
.post-order b { position: absolute; left: 2px; bottom: 2px; min-width: 18px; padding: 2px; background: var(--ink); color: #fff; font: 800 .65rem/1 "Courier New", monospace; }
.splitter-downloads { display: grid; grid-template-columns: 1.3fr 1fr; gap: 7px; }
.splitter-explainer { margin-top: 24px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.splitter-explainer .content-panel,
.splitter-steps,
.splitter-faq { padding: clamp(18px,3vw,32px); }
.splitter-explainer h2,
.splitter-steps h2,
.splitter-faq h2 { margin-top: 8px; }
.splitter-explainer p:not(.kicker),
.splitter-steps span,
.splitter-faq p { color: var(--muted); line-height: 1.65; }
.splitter-steps,
.splitter-faq { margin-top: 18px; }
.splitter-steps ol { margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; list-style: none; counter-reset: splitsteps; }
.splitter-steps li { padding: 14px; display: grid; gap: 6px; border: 1px solid var(--line); background: #fff; counter-increment: splitsteps; }
.splitter-steps li::before { content: "0" counter(splitsteps); color: var(--accent); font: 900 .75rem/1 "Courier New", monospace; }
.splitter-page .related-tools { margin-top: 18px; padding: 24px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; border: 2px solid var(--line); background: var(--yellow); box-shadow: var(--shadow); }
.splitter-page .related-tools h2 { margin-top: 7px; }
.splitter-page .related-links { display: grid; gap: 7px; }
.splitter-page .related-links a { padding: 11px 13px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: #fff; text-decoration: none; font-weight: 800; }
.splitter-page .related-links span { color: var(--muted); font-size: .8rem; font-weight: 400; }
.splitter-source { margin: 14px 0 0; color: var(--muted); font-size: .74rem; text-align: center; }
@media (max-width: 940px) { .splitter-tool,.splitter-explainer,.splitter-page .related-tools { grid-template-columns: 1fr; } .splitter-preview { min-height: 650px; } }
@media (max-width: 580px) { .splitter-presets { grid-template-columns: repeat(2,minmax(0,1fr)); } .splitter-preview-head { align-items: flex-start; flex-direction: column; } .post-order { grid-template-columns: 1fr; } .splitter-downloads,.splitter-steps ol { grid-template-columns: 1fr; } .splitter-page .related-links a { flex-direction: column; } }