:root { --split-ink:#242321; --split-paper:#fffdf9; --split-line:#d6cec3; --split-muted:#766f66; --split-blue:#3766e8; --split-pink:#ef6fa8; --split-yellow:#f4c84d; }
.split-main { min-height:100vh; padding:18px max(24px,calc((100vw - 1260px)/2)) 96px; }
.split-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:50px; align-items:center; padding:52px 0 44px; }
.split-hero h1 { max-width:780px; margin:12px 0 18px; color:var(--split-ink); font-size:clamp(48px,7vw,84px); line-height:.94; letter-spacing:-.064em; }
.split-hero h1 em { color:var(--split-blue); font-family:Georgia,serif; font-weight:500; }
.split-hero p { max-width:700px; margin:0; color:var(--split-muted); font-size:16px; line-height:1.75; }
.split-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.split-tags span { border:1px solid #d4cdc2; border-radius:999px; padding:7px 10px; color:#5f5951; background:rgba(255,255,255,.6); font-size:10px; font-weight:780; }
.split-hero-art { min-height:250px; position:relative; overflow:hidden; border:1px solid #191814; border-radius:31px; background:#25241f; box-shadow:0 22px 55px rgba(44,38,30,.17); }
.split-hero-art b { position:absolute; left:24px; top:22px; z-index:3; color:#fff; font:750 11px ui-monospace,monospace; letter-spacing:.12em; }
.split-hero-art::before { content:''; position:absolute; width:184px; height:184px; left:50%; top:50%; transform:translate(-50%,-46%) rotate(-5deg); border-radius:22px; background:linear-gradient(145deg,var(--split-pink),var(--split-yellow)); box-shadow:0 18px 40px rgba(0,0,0,.25); }
.split-hero-art::after { content:''; position:absolute; width:184px; height:184px; left:50%; top:50%; transform:translate(-50%,-46%) rotate(-5deg); background-image:linear-gradient(90deg,transparent 32.8%,#fff 33%,#fff 34%,transparent 34.2%,transparent 65.8%,#fff 66%,#fff 67%,transparent 67.2%),linear-gradient(transparent 32.8%,#fff 33%,#fff 34%,transparent 34.2%,transparent 65.8%,#fff 66%,#fff 67%,transparent 67.2%); }
.split-workbench { overflow:hidden; border:1px solid var(--split-line); border-radius:28px; background:var(--split-paper); box-shadow:0 24px 70px rgba(47,39,29,.1); }
.split-workbench-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 27px; border-bottom:1px solid #e2dcd2; }
.split-kicker { color:var(--split-blue); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.split-workbench-heading h2 { margin:4px 0 0; font-size:24px; letter-spacing:-.035em; }
.split-local-note { color:#676158; font-size:11px; }
.split-local-note i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#62a987; box-shadow:0 0 0 4px rgba(98,169,135,.12); }
.split-layout { display:grid; grid-template-columns:320px minmax(0,1fr); min-height:690px; }
.split-controls { padding:21px; border-right:1px solid #e1dad0; background:#f7f2ea; }
.split-panel-heading { display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.split-panel-heading span { color:#b34e7a; font:800 10px ui-monospace,monospace; }
.split-panel-heading h3 { margin:0; font-size:15px; }
.split-dropzone { display:grid; place-items:center; min-height:120px; border:1px dashed #bbb2a5; border-radius:15px; padding:15px; text-align:center; background:rgba(255,255,255,.58); transition:.2s ease; }
.split-dropzone.dragging { border-color:var(--split-blue); background:#edf2ff; transform:translateY(-2px); }
.split-controls button { border:1px solid #cac2b6; border-radius:9px; padding:8px 10px; color:#4f4942; background:#fff; font-family:inherit; font-size:10px; font-weight:780; cursor:pointer; }
.split-dropzone p { margin:9px 0 0; color:#827a70; font-size:10px; line-height:1.5; }
.split-empty { margin-top:13px; padding:20px 12px; border-radius:13px; color:#81796f; background:#ebe5dc; text-align:center; }
.split-empty strong { display:block; color:#49443e; font-size:11px; }
.split-empty p { margin:6px 0 0; font-size:9px; line-height:1.55; }
.split-source { margin-top:13px; }
.split-source img { display:block; width:100%; height:130px; border-radius:12px; object-fit:contain; background:#e6dfd5; }
.split-source small { display:block; overflow:hidden; margin-top:7px; color:#716a61; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
#splitClear { width:100%; margin-top:8px; }
.split-settings { margin-top:18px; padding-top:18px; border-top:1px solid #ddd5ca; }
.split-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:12px; }
.split-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.split-fields label { display:grid; gap:6px; color:#625c54; font-size:10px; font-weight:760; }
.split-fields label.wide { grid-column:1/-1; }
.split-fields input,.split-fields select { width:100%; min-width:0; height:39px; border:1px solid #cbc3b7; border-radius:9px; padding:0 9px; color:#2e2b27; background:#fff; font:inherit; }
.split-quality-label span { display:flex; justify-content:space-between; gap:8px; }
.split-quality-label input { padding:0; accent-color:var(--split-blue); }
#splitExport { width:100%; min-height:50px; margin-top:15px; border:0; border-radius:12px; color:#fff; background:var(--split-blue); font-size:12px; font-weight:850; box-shadow:0 10px 26px rgba(55,102,232,.22); }
#splitExport:disabled { cursor:not-allowed; opacity:.42; box-shadow:none; }
.split-status { display:block; margin-top:9px; color:#817a71; font-size:9px; line-height:1.5; }
.split-error { margin:11px 0 0; border:1px solid #e5b2a6; border-radius:9px; padding:9px 10px; color:#963b29; background:#fff0ec; font-size:10px; line-height:1.5; }
.split-preview-panel { min-width:0; padding:21px; background:#e9e3d9; }
.split-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.split-preview-heading output { color:#6c655d; font-size:10px; font-weight:700; }
.split-canvas-shell { display:grid; place-items:center; min-height:520px; overflow:hidden; border:1px solid #cfc7bb; border-radius:19px; padding:20px; background-image:linear-gradient(45deg,#d9d2c8 25%,transparent 25%),linear-gradient(-45deg,#d9d2c8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d2c8 75%),linear-gradient(-45deg,transparent 75%,#d9d2c8 75%); background-position:0 0,0 10px,10px -10px,-10px 0; background-size:20px 20px; background-color:#eee8de; }
#splitCanvas { display:block; max-width:100%; max-height:620px; width:auto; height:auto; border-radius:5px; box-shadow:0 13px 40px rgba(43,36,28,.18); }
.split-results { margin-top:16px; border-top:1px solid #d3cbbf; padding-top:16px; }
.split-results-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.split-results-head strong { font-size:14px; }
.split-results-head a { border-radius:9px; padding:10px 13px; color:#fff; background:#25231f; text-decoration:none; font-size:10px; font-weight:800; }
.split-tile-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.split-tile-links a { min-width:0; overflow:hidden; border:1px solid #d4ccc0; border-radius:11px; padding:6px; color:#514b44; background:#faf7f1; text-decoration:none; }
.split-tile-links img { display:block; width:100%; aspect-ratio:1; border-radius:7px; object-fit:cover; background:#e8e2d9; }
.split-tile-links span { display:block; overflow:hidden; margin-top:6px; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.split-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.split-benefits article { min-height:165px; border:1px solid #d7d0c5; border-radius:18px; padding:22px; background:rgba(255,255,255,.5); }
.split-benefits span { color:var(--split-blue); font:italic 15px Georgia,serif; }
.split-benefits strong { display:block; margin:22px 0 8px; font-size:15px; }
.split-benefits p { margin:0; color:var(--split-muted); font-size:11px; line-height:1.7; }
@media(max-width:900px){.split-layout{grid-template-columns:1fr}.split-controls{border-right:0;border-bottom:1px solid #e1dad0}.split-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.split-fields label.wide{grid-column:auto}.split-tile-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.split-hero{grid-template-columns:1fr;gap:28px;padding-top:34px}.split-hero h1{font-size:50px}.split-hero-art{min-height:205px}.split-fields{grid-template-columns:1fr 1fr}.split-canvas-shell{min-height:400px}.split-benefits{grid-template-columns:1fr}}
@media(max-width:520px){.split-main{padding-inline:14px}.split-workbench-heading{align-items:flex-start;flex-direction:column}.split-controls,.split-preview-panel{padding:16px}.split-preview-heading{align-items:flex-start;flex-direction:column}.split-fields{grid-template-columns:1fr}.split-fields label.wide{grid-column:1}.split-canvas-shell{min-height:310px;padding:9px}.split-tile-links{grid-template-columns:repeat(2,minmax(0,1fr))}.split-results-head{align-items:flex-start;flex-direction:column}}