body{background:#000!important}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#000;--border:#ffffff26;--text:#ffffffd9;--dim:#fff6;--accent:#ffffffe6;--err:#ff3d3d;--font:"DM Mono","Courier New",monospace;--size:9px;--track:#ffffff1f;--thumb:#fff9}html,body,#root{width:100%;height:100%;font-family:var(--font);font-size:var(--size);letter-spacing:.14em;-webkit-font-smoothing:antialiased;background:#000;overflow:hidden}.app{width:100vw;height:100vh;position:relative}.canvas-pane{z-index:0;width:100%;height:100%;position:absolute;inset:0}.panel-pane{-webkit-backdrop-filter:blur(24px)saturate(160%);scrollbar-width:none;z-index:10;background:#060606b8;border-left:.5px solid #ffffff1f;flex-direction:column;justify-content:center;width:220px;height:100%;display:flex;position:absolute;top:0;right:0;overflow-y:auto}.panel-pane::-webkit-scrollbar{display:none}.panel-header{border-bottom:.5px solid #ffffff26;padding:18px 14px 14px}.panel-title{letter-spacing:.24em;color:#fff;font-size:11px;font-weight:500;line-height:1}.panel-sub{letter-spacing:.14em;color:#fff6;margin-top:4px;font-size:7.5px}.panel-section{border-bottom:.5px solid #ffffff1a;padding:22px 18px}.section-label{letter-spacing:.28em;color:#ffffff4d;text-transform:uppercase;margin-bottom:14px;font-size:7px}.drop-zone{border:.5px solid var(--border);cursor:pointer;justify-content:center;align-items:center;width:100%;height:80px;margin-bottom:8px;transition:border-color .15s;display:flex;position:relative;overflow:hidden}.drop-zone:hover,.drop-zone.drag-over{border-color:#ffffff59}.drop-preview{object-fit:cover;width:100%;height:100%}.drop-text{letter-spacing:.12em;color:var(--dim);text-align:center;font-size:7.5px;line-height:1.8}.drop-overlay{background:#000000b8;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.analysing-text{letter-spacing:.2em;color:#ffffff80;font-size:7.5px;animation:.8s step-end infinite blink}.text-input-row{display:flex}.text-input{border:.5px solid var(--border);color:var(--text);font-family:var(--font);font-size:var(--size);letter-spacing:.1em;text-transform:uppercase;background:0 0;border-right:none;outline:none;flex:1;padding:6px 7px}.text-input::placeholder{color:var(--dim)}.text-input:focus{border-color:#ffffff40}.btn{border:.5px solid var(--border);color:var(--text);font-family:var(--font);font-size:var(--size);letter-spacing:.12em;cursor:pointer;text-transform:uppercase;background:0 0;padding:6px 9px;transition:border-color .15s,color .15s}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn:disabled{opacity:.25;cursor:default}.btn.full-width{width:100%;margin-bottom:8px;padding:7px}.slider-row{margin-bottom:16px}.slider-label{letter-spacing:.14em;color:#fffc;justify-content:space-between;margin-bottom:4px;font-size:8.5px;display:flex}.slider-val{color:var(--dim);font-variant-numeric:tabular-nums}.slider{appearance:none;background:var(--track);cursor:pointer;outline:none;width:100%;height:1px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--thumb);cursor:pointer;width:7px;height:7px}.slider::-moz-range-thumb{background:var(--thumb);cursor:pointer;border:none;width:7px;height:7px}.color-row{align-items:center;gap:7px;margin-top:6px;display:flex}.slider-label-text{letter-spacing:.14em;flex:1;font-size:8px}.color-swatch{border:.5px solid var(--border);flex-shrink:0;width:14px;height:14px}.color-hex{letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums;font-size:7.5px}.param-bar-row{align-items:center;gap:7px;margin-bottom:7px;display:flex}.param-bar-label{letter-spacing:.12em;flex-shrink:0;width:48px;font-size:7.5px}.param-bar-track{background:var(--track);flex:1;height:1px;position:relative}.param-bar-fill{background:#ffffff73;height:1px;transition:width .6s cubic-bezier(.16,1,.3,1);position:absolute;top:0;left:0}.param-bar-val{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;width:24px;font-size:7.5px}.status{letter-spacing:.12em;color:var(--dim);font-size:7.5px;animation:1.2s step-end infinite blink}.status.error{color:var(--err);animation:none}.ref-image{border:.5px solid var(--border);width:100%;display:block}.instructions{flex-direction:column;gap:4px;display:flex}.instructions div{letter-spacing:.12em;color:var(--dim);font-size:7.5px}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes shimmer{0%{left:-45%}to{left:100%}}@keyframes progress{0%{width:60%;left:-60%}to{width:60%;left:100%}}