:root{
  --bg:#0b0d12;--panel:#151923;--panel-2:#1d2330;--panel-3:#252c3b;
  --line:#2b3343;--line-soft:#202735;
  --ink:#f1efe7;--ink-dim:#b8bdca;--ink-faint:#9aa3b2;
  --accent:#d99a5f;--accent-2:#77c7d9;--good:#91c99a;
  --danger:#e74c3c;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Roboto Mono",monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;overflow:hidden;display:flex;flex-direction:column;touch-action:manipulation;}
button,input,a,select{font:inherit;}
button{color:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
.skip-link{position:absolute;left:12px;top:12px;z-index:100;padding:8px 12px;border-radius:999px;background:var(--accent);color:#1b1207;font-weight:700;transform:translateY(-160%);transition:transform .16s ease;}
.skip-link:focus{transform:translateY(0);}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

header{display:flex;align-items:baseline;gap:14px;flex:none;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#171c26,#11151d);}
.logo{font-family:"Bebas Neue",var(--mono);font-weight:400;letter-spacing:.07em;font-size:29px;line-height:1;color:var(--ink);}
.logo .approx{font-family:var(--mono);color:var(--accent);font-size:.6em;margin:0 .08em;vertical-align:.08em;}
.tagline{font-size:12px;color:var(--ink-faint);letter-spacing:.035em;}
.head-spacer{flex:1;}
.readout{font-family:var(--mono);font-size:11px;color:var(--ink-dim);white-space:nowrap;}
.about-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink-dim);font-size:12px;text-decoration:none;border:1px solid var(--line);padding:6px 11px;border-radius:999px;transition:all .12s;white-space:nowrap;}
.about-link:hover{color:var(--ink);border-color:var(--accent);}
.about-link svg{width:14px;height:14px;flex:none;}

main{flex:1;display:flex;min-height:0;}

.sidebar{width:360px;flex:none;background:linear-gradient(180deg,rgba(21,25,35,.98),rgba(17,21,30,.98));border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;box-shadow:24px 0 70px rgba(0,0,0,.18);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--line-soft) transparent;}

.preview-section{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;background:radial-gradient(120% 120% at 50% 30%,#121722 0%,#090b10 100%);overflow:hidden;}
.preview-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 50% 45%,#000 0 45%,transparent 78%);pointer-events:none;}
.preview-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(21,25,35,.6);backdrop-filter:blur(8px);z-index:2;}
.preview-header h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:0;}
.preview-container{flex:1;min-width:0;min-height:0;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;overflow:hidden;}

.panel{border-bottom:1px solid var(--line);}
.sec-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px 10px;cursor:pointer;text-align:left;}
.sec-head:hover{background:rgba(255,255,255,.025);}
.sec-head .tw{margin-left:auto;color:var(--ink-faint);transition:transform .18s;font-size:10px;}
section.collapsed .sec-head .tw{transform:rotate(-90deg);}
section.collapsed .sec-body{display:none;}
.sec-body{padding:2px 16px 16px;}

.status{padding:10px;border-radius:var(--r);margin:0 16px 12px;font-size:12px;display:flex;align-items:center;gap:8px;font-family:var(--mono);letter-spacing:.02em;}
.status.info{background:rgba(119,199,217,.1);color:var(--accent-2);border:1px solid rgba(119,199,217,.2);}
.status.success{background:rgba(145,201,154,.1);color:var(--good);border:1px solid rgba(145,201,154,.2);}
.status.error{background:rgba(231,76,60,.1);color:var(--danger);border:1px solid rgba(231,76,60,.2);}
.status.warning{background:rgba(217,154,95,.1);color:var(--accent);border:1px solid rgba(217,154,95,.2);}

.drop-zone{border:2px dashed var(--line);border-radius:var(--r);padding:20px 15px;text-align:center;cursor:pointer;transition:all .2s ease;background:var(--panel);}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:rgba(217,154,95,.06);}
.drop-zone-icon{font-size:2rem;margin-bottom:10px;}
.drop-zone p{color:var(--ink-faint);font-size:12px;margin:0;}
#fileInput{display:none;}
.sample-btn{width:100%;padding:8px;border:1px dashed var(--line);border-radius:var(--r);background:transparent;color:var(--ink-faint);font-size:12px;cursor:pointer;transition:all .2s ease;margin-top:10px;}
.sample-btn:hover{border-color:var(--accent);color:var(--accent);}

.field{margin:13px 0 0;}
.field:first-child{margin-top:4px;}
.field-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px;}
.field-top label{font-size:12px;color:var(--ink-dim);}
.field-top .val{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--panel-3);border:1px solid var(--line);border-radius:6px;width:74px;text-align:right;padding:3px 7px;}
.field-top .val:focus{outline:none;border-color:var(--accent);}
.ft-right{display:flex;align-items:center;gap:7px;}

.input-group{margin-bottom:12px;}
.input-group label{display:block;font-size:12px;color:var(--ink-dim);margin-bottom:6px;}
.input-group select{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);color:var(--ink);font-size:12px;cursor:pointer;transition:border-color .12s;}
.input-group select:focus{outline:none;border-color:var(--accent);}

.input-group .label-with-info{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.input-group .label-with-info label{margin-bottom:0;}
.info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;color:var(--ink-faint);cursor:help;position:relative;transition:color .12s ease;user-select:none;}
.info-icon:hover,.info-icon:focus{color:var(--accent-2);outline:none;}
.info-icon::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(-4px);background:rgba(21,25,35,.98);color:var(--ink);padding:8px 12px;border-radius:var(--r);font-size:11px;line-height:1.4;white-space:normal;width:220px;text-align:left;pointer-events:none;z-index:1000;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s;border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.4);}
.info-icon::before{content:'';position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(21,25,35,.98);pointer-events:none;z-index:1001;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s;}
@media (hover:hover) and (pointer:fine){.info-icon:hover::after,.info-icon:hover::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}}
.info-icon.active::after,.info-icon.active::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.info-icon:focus::after,.info-icon:focus::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

.checkbox-group{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.checkbox-group input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);}
.checkbox-group label{font-size:12px;color:var(--ink-dim);cursor:pointer;}
.checkbox-group .info-icon{margin-left:auto;}

.color-picker-group{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.color-picker-group input[type="color"]{width:40px;height:30px;border:none;border-radius:6px;cursor:pointer;padding:2px;}
.color-picker-group span{font-size:12px;color:var(--ink-dim);}
.color-picker-group .info-icon{margin-left:auto;}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;background:var(--line);outline:none;margin:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent);}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--panel);}

.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.seg button{flex:1;background:none;border:0;color:var(--ink-dim);font-size:12px;padding:8px 4px;cursor:pointer;transition:all .12s;font-family:var(--sans);}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.035);}
.seg button.on{background:var(--accent);color:#1a1206;font-weight:700;}

.toggle{display:flex;align-items:center;gap:9px;margin-top:13px;cursor:pointer;user-select:none;color:var(--ink-dim);}
.toggle .box{width:38px;height:21px;border-radius:99px;background:var(--line);position:relative;flex:none;transition:background .15s;}
.toggle .box::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:var(--ink-dim);top:3px;left:3px;transition:.15s;}
.toggle.on .box{background:var(--accent);}
.toggle.on .box::after{background:#1a1206;left:20px;}
.toggle span{font-size:12px;}

.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:var(--r);padding:9px 12px;font-size:12.5px;cursor:pointer;font-family:var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:all .12s;white-space:nowrap;}
.btn:hover{border-color:var(--accent);background:var(--panel-3);}
.btn:active{transform:scale(.97);}
.btn svg{width:15px;height:15px;flex:none;}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:700;}
.btn.ghost{background:rgba(20,24,33,.72);backdrop-filter:blur(8px);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:700;}
.btn-secondary{background:var(--panel-2);border-color:var(--line);color:var(--ink);}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn.danger:hover{background:#c0392b;border-color:#c0392b;}
.btn:disabled{background:var(--panel-3);border-color:var(--line);color:var(--ink-faint);cursor:not-allowed;transform:none;}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn-grid .span2{grid-column:1/3;}

.hint{font-size:11px;color:var(--ink-faint);margin-top:10px;line-height:1.65;}

.progress-container{margin:0 16px 12px;}
.progress-bar{width:100%;height:4px;background:var(--line);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;background:var(--accent);width:0%;transition:width .1s linear;}
.progress-text{font-size:11px;color:var(--ink-faint);margin-top:6px;text-align:center;font-family:var(--mono);}

.preview-container.has-image{background:repeating-conic-gradient(var(--panel-3) 0% 25%,var(--panel-2) 0% 50%) 50% / 20px 20px;}
#dropPreview{display:none;width:auto;height:auto;max-width:calc(100% - 32px);max-height:calc(100% - 32px);object-fit:contain;}
.placeholder{text-align:center;color:var(--ink-faint);}
.placeholder-icon{font-size:4rem;margin-bottom:15px;}
.canvas-container{display:none;width:100%;height:100%;min-width:0;min-height:0;align-items:center;justify-content:center;overflow:hidden;}
#outputCanvas{display:block;width:auto;height:auto;max-width:calc(100% - 32px);max-height:calc(100% - 32px);}

.debug-panel{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;}
.perf-stats{font-family:var(--mono);font-size:11px;color:var(--ink-faint);background:var(--panel);padding:10px;border-radius:var(--r);margin-top:10px;white-space:pre-wrap;display:none;max-height:200px;overflow-y:auto;}
.perf-stats.visible{display:block;}

.cancel-btn-container{display:none;}
.cancel-btn-container.visible{display:block;}

.selection-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:none;}
.selection-overlay.active{display:block;cursor:crosshair;}
.selection-box{position:absolute;border:2px dashed var(--accent);background:rgba(217,154,95,.1);pointer-events:none;display:none;}

.modal{position:fixed;inset:0;background:rgba(5,6,10,.82);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:50;padding:20px;}
.modal.open{opacity:1;pointer-events:auto;}
.modal-card{display:flex;flex-direction:column;align-items:center;gap:14px;transform:scale(.95) translateY(8px);transition:transform .3s cubic-bezier(.2,.9,.3,1);max-width:92vw;}
.modal.open .modal-card{transform:scale(1) translateY(0);}
.modal-card img{max-width:92vw;max-height:68vh;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);}
.modal-cap{font-size:13px;color:var(--ink-dim);text-align:center;}

@media (max-width:900px){
  main{flex-direction:column;}
  .sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);flex:1;min-height:0;max-height:50vh;}
  .preview-section{flex:none;height:50vh;}
  .tagline{display:none;}
  header{align-items:center;gap:10px;padding:12px 14px;}
  .logo{font-size:22px;}
  .head-spacer{display:none;}
  .readout{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);}
  .readout::-webkit-scrollbar{display:none;}
  .about-link{flex:none;}
}
.hidden{display:none!important;}