:root{color-scheme:dark;--bg:#131916;--panel:#1b231f;--line:#35423b;--text:#e8eee8;--muted:#a5b2a8;--accent:#d9ec9a;--v:#eeaf72;--h:#7fd7d0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,sans-serif}header{max-width:1600px;margin:auto;padding:22px 36px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:1px}a{color:inherit;text-decoration:none}button,label.primary{cursor:pointer}button,input,select{font:inherit}button,select,input[type=number]{background:#26312b;color:var(--text);border:1px solid #46564b;border-radius:6px;padding:9px 12px}button:hover{background:#38483c}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,label.primary:focus-within{outline:2px solid var(--accent);outline-offset:3px}input[type=checkbox],input[type=range]{accent-color:var(--accent)}.primary{display:inline-block;background:var(--accent);border:0;color:#20291d;font-weight:700;padding:13px 24px;border-radius:6px}.primary:hover{background:#edf8bd}.privacy{color:var(--accent)}main{max-width:1600px;margin:auto;padding:0 36px}.intro{display:flex;justify-content:space-between;align-items:center;padding:38px 0 28px;gap:24px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;color:var(--accent)}h1{font-size:clamp(32px,4vw,57px);line-height:1.15;letter-spacing:-2px;margin:12px 0 18px;font-weight:550}h1>span:first-child{color:var(--accent)}.symbol{margin-left:22px;color:var(--accent)}.intro p:not(.eyebrow){color:var(--muted);font-size:15px}.upload{display:flex;flex-direction:column;gap:9px;min-width:235px;text-align:center}.upload small{color:var(--muted);font-size:11px}#file{width:235px;font-size:11px}.steps{display:flex;gap:40px;padding:16px 0;border-top:1px solid var(--line);color:var(--accent);font-size:12px}.steps b{font-weight:500;color:var(--muted);padding-left:9px}#status{padding:12px 16px;background:#253127;border:1px solid #465841;border-radius:6px;margin:6px 0 20px;min-height:46px}#status.error{background:#422b27;border-color:#a7725d;color:#ffd9c2}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;min-height:66px}h2{font-size:16px;margin:0 0 14px;font-weight:600}.panel h2{margin:0}.panel h2 small{display:block;font-size:9px;color:var(--muted);letter-spacing:1px;font-weight:400}.zoom{display:flex;gap:5px;align-items:center}.zoom button{padding:6px 10px}.zoom output{font-size:11px;min-width:40px;text-align:center}.stage,.result-stage{height:400px;background-color:#101512;background-image:linear-gradient(45deg,#18201b 25%,transparent 25%),linear-gradient(-45deg,#18201b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#18201b 75%),linear-gradient(-45deg,transparent 75%,#18201b 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.stage{position:relative;overflow:hidden;touch-action:none}.stage canvas,.stage svg{position:absolute;inset:0;width:100%;height:100%}.stage svg{overflow:hidden}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#91a08e;font-size:64px;pointer-events:none}#empty p{font-size:16px;margin:0}#empty small{font-size:12px;margin-top:6px}.result-stage{display:flex;align-items:center;justify-content:center;padding:24px;position:relative}#result-wrap{position:relative;display:none;max-width:100%;max-height:100%;line-height:0}#result{max-width:100%;max-height:352px;object-fit:contain;display:block}#grid-overlay{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px);background-size:10% 10%}#result-empty{color:var(--muted)}.tools,.result-caption{padding:12px 16px;display:flex;align-items:center;gap:10px;min-height:61px}.tools label{margin-right:auto}.result-caption{justify-content:space-between;font-size:11px;color:var(--muted)}.hint{font-size:12px;color:var(--muted);line-height:1.7}.panel>.hint{padding:0 16px;margin:0 0 16px}.settings{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:26px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.settings article{padding:22px;min-width:0}.settings article+article{border-left:1px solid var(--line)}label{font-size:12px}select,input[type=number]{width:100%;display:block;margin:7px 0 12px}input[type=range]{width:100%;margin:12px 0}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.line-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.line-controls button{font-size:12px;border-left:3px solid var(--v)}.line-controls button:nth-child(n+3){border-left-color:var(--h)}.line-controls button.active{background:#44503d;color:#fff;border-top-color:var(--accent)}#step-help{font-size:13px;min-height:40px}.export-note{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.export-note button{font-size:10px;padding:4px 6px}#save{width:100%;margin-top:4px}#ratio-label{float:right}footer{margin:30px 0;padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px}footer strong{color:var(--text)}footer a{display:block;margin-top:12px;color:var(--accent)}svg circle{cursor:grab;stroke:#101512;stroke-width:2}svg circle:focus{outline:none;stroke:white;stroke-width:3}svg text{pointer-events:none;font:bold 11px system-ui;fill:#fff;paint-order:stroke;stroke:#18201b;stroke-width:3px}@media(min-width:1450px){.stage,.result-stage{height:480px}#result{max-height:432px}}@media(max-width:900px){main{padding:0 18px}header{padding:18px}.settings{grid-template-columns:1fr}.settings article+article{border-left:0;border-top:1px solid var(--line)}.symbol{display:none}.stage,.result-stage{height:330px}#result{max-height:282px}.panel-head{padding:10px}.zoom{gap:2px}.zoom button{padding:6px}.privacy{display:none}}@media(max-width:650px){.intro{display:block;padding-top:22px}.upload{margin-top:22px;align-items:stretch}.upload input{width:100%}.workspace{grid-template-columns:1fr}.steps{gap:12px;justify-content:space-between;font-size:10px}.steps b{padding-left:3px}h1{font-size:38px}.stage,.result-stage{height:340px}#result{max-height:292px}.intro p:not(.eyebrow){font-size:14px}header{font-size:10px}.result-caption{flex-wrap:wrap}}