:root{background:#181b1d;color:#e7e8e4;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.app{min-height:100dvh;display:flex;flex-direction:column}header{height:66px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 30px;border-bottom:1px solid #343c3c}.logo{color:#f0f1eb;text-decoration:none;font-size:17px;font-weight:850;letter-spacing:-.055em;display:flex;align-items:center;gap:8px}.logo-mark{width:28px;height:28px;display:grid;place-items:center;border:1px solid #c6d1c3;color:#e8ede2;border-radius:2px;font-weight:900}.logo-mark span{color:#f07372}.header-middle,.header-right{color:#849091;font-size:9px;font-weight:850;letter-spacing:.13em}.header-right i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#94b779;margin-right:6px}.layout{width:100%;max-width:1800px;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 310px;margin:auto}.main-panel{min-width:0;padding:37px clamp(22px,4vw,65px) 50px}.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{color:#7f918b;font-size:9px;font-weight:850;letter-spacing:.15em}.panel-heading h1{margin:10px 0 9px;font-size:clamp(34px,4.5vw,59px);font-weight:680;line-height:1;letter-spacing:-.075em}.panel-heading p{max-width:590px;margin:0;color:#899596;font-size:12px;line-height:1.55}.panel-actions{display:flex;gap:7px;white-space:nowrap}.panel-actions button{height:38px;padding:0 13px;border:1px solid #485351;background:transparent;color:#c1cec3;font-size:11px;font-weight:800}.panel-actions button:hover{background:#2d3635}.panel-actions button:last-child{border-color:#ee8e7e;background:#ef7969;color:#231b1b}.panel-actions button:last-child:disabled{opacity:.35}.stage-wrap{border:1px solid #394142;background:#111516}.stage-top,.stage-foot{height:39px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;color:#8d9a98;font-size:9px;font-weight:850;letter-spacing:.13em}.stage-top{border-bottom:1px solid #333b3c}.stage-foot{border-top:1px solid #333b3c}.stage-foot span:nth-child(2){font-size:10px;font-weight:500;letter-spacing:0;text-align:center}.stage{position:relative;height:min(52vw,650px);min-height:365px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#202729;background-image:linear-gradient(45deg,#252e30 25%,transparent 25%),linear-gradient(-45deg,#252e30 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#252e30 75%),linear-gradient(-45deg,transparent 75%,#252e30 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.stage canvas{display:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 0 28px #0005}.stage canvas.visible{display:block}.empty{text-align:center;color:#b8c4bd}.empty-symbol{display:block;color:#ef7969;font-size:90px;line-height:1;font-weight:200}.empty strong{display:block;margin-top:12px;font-size:19px;letter-spacing:-.04em}.empty p{color:#859590;font-size:11px}.inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.file-well{min-width:0;min-height:74px;display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px dashed #56615d;background:#222929;transition:border-color .15s,background .15s}.file-well.dragging{border-color:#f58e7a;background:#353532}.well-index{width:30px;height:30px;display:grid;place-items:center;flex:none;background:#8eaba1;color:#172024;font:850 14px ui-monospace,SFMono-Regular,Consolas,monospace}.well-index.b{background:#f0806c}.file-well>div{min-width:0;flex:1}.file-well strong,.file-well small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-well strong{font-size:11px}.file-well small{margin-top:5px;color:#7f928e;font-size:10px}.file-well button{flex:none;border:0;background:none;color:#d8e1db;font-size:10px;font-weight:750}.file-well button:hover{text-decoration:underline}.tool-panel{display:flex;flex-direction:column;border-left:1px solid #343c3c;padding:39px 25px 28px;background:#1d2223}.panel-top h2{margin:9px 0 26px;font-size:30px;letter-spacing:-.065em}.control-section{padding:21px 0;border-top:1px solid #394142}.label,.control-head label{color:#9caeaa;font-size:9px;font-weight:850;letter-spacing:.12em}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:13px}.modes label{position:relative}.modes input{position:absolute;opacity:0}.modes span{height:35px;display:grid;place-items:center;border:1px solid #465451;color:#9eb0a8;font-size:10px;font-weight:800;cursor:pointer}.modes input:checked+span{border-color:#ef7969;background:#ef7969;color:#1d2223}.modes input:focus-visible+span{outline:2px solid #f6aa98;outline-offset:2px}.control-section p,.panel-bottom p{margin:12px 0 0;color:#7d918b;font-size:10px;line-height:1.5}.control-head{display:flex;align-items:center;justify-content:space-between}.control-head output{color:#ee907f;font-size:12px;font-weight:800}.control-section input[type=range]{width:100%;margin:15px 0 0;accent-color:#ef7969}.offsets{display:flex;gap:8px;margin-top:13px}.offsets label{display:flex;align-items:center;gap:7px;color:#8fa099;font-size:11px}.offsets input{width:70px;height:34px;padding:0 8px;border:1px solid #4d5a55;background:#252d2e;color:#e7e9e4;font-size:11px}.panel-bottom{margin-top:auto;border-top:1px solid #394142;padding-top:25px}.diff-stat span{display:block;color:#8d9f99;font-size:9px;font-weight:850;letter-spacing:.12em}.diff-stat strong{display:block;margin-top:10px;color:#ef7969;font-size:39px;letter-spacing:-.07em}.bottom-actions{display:flex;flex-direction:column;gap:6px;margin-top:25px}.bottom-actions button{height:36px;border:1px solid #47534e;background:transparent;color:#b2c5b7;font-size:11px;font-weight:750}.bottom-actions button:hover{background:#2e3936}.bottom-actions button:disabled{opacity:.35}footer{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-top:1px solid #343c3c;color:#788985;font-size:9px;font-weight:800;letter-spacing:.12em}.toast{position:fixed;right:20px;bottom:20px;padding:11px 14px;background:#ef7969;color:#1b1e1e;font-size:11px;font-weight:750;opacity:0;pointer-events:none;transition:opacity .15s}.toast.show{opacity:1}button:focus-visible,input:focus-visible{outline:2px solid #f09a87;outline-offset:2px}@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 270px}.tool-panel{padding:30px 18px}.main-panel{padding:30px 22px}.panel-heading{align-items:start;flex-direction:column}}@media(max-width:780px){.layout{display:block}.tool-panel{border-left:0;border-top:1px solid #394142}.panel-bottom{margin-top:20px}.main-panel{padding:25px 18px}.stage{height:450px}.tool-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.panel-top,.panel-bottom{grid-column:1/-1}.panel-top h2{margin-bottom:10px}.bottom-actions{flex-direction:row}.bottom-actions button{flex:1}}@media(max-width:550px){header{padding:0 17px}.header-middle{display:none}.header-right{font-size:8px}.panel-heading h1{font-size:40px}.stage{height:330px;min-height:280px}.stage-foot span:nth-child(2){display:none}.inputs{grid-template-columns:1fr}.tool-panel{display:block}.bottom-actions{flex-direction:column}.panel-actions{width:100%}.panel-actions button{flex:1}footer{padding:0 17px}footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}