:root{font-family:Inter,system-ui,Arial,sans-serif;color:#e4e7f0;background:#11151e}*{box-sizing:border-box}body{margin:0}header{height:70px;display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid #333b4a;background:#1b202b}header>a{color:#32d0e4;text-decoration:none;font-weight:700}header strong{font-size:18px;white-space:nowrap}button,.upload,select,input:not([type=range]):not([type=color]){border:1px solid #42495a;border-radius:8px;padding:10px;background:#272e3d;color:inherit;font:inherit}button,.upload{cursor:pointer}button:hover,.upload:hover{background:#3c4760}header button{white-space:nowrap}header #projectName{margin-right:auto;min-width:100px;width:210px}button.primary{background:#00c3d6;color:#071620;font-weight:800}main{height:calc(100dvh - 70px);display:grid;grid-template-columns:minmax(220px,280px) minmax(280px,1fr) minmax(250px,310px);overflow:hidden}aside{background:#1a202b;padding:16px;overflow-y:auto}aside.left{border-right:1px solid #303a4d}aside.right{border-left:1px solid #303a4d}h3{text-transform:uppercase;font-size:13px;letter-spacing:.07em;margin:16px 0 10px;color:#78d3e1}label{display:grid;gap:6px;font-size:13px;margin:12px 0}.pills{display:flex;gap:6px;flex-wrap:wrap}.pills button{font-size:13px;padding:8px 10px}.upload{display:block;text-align:center;margin-top:15px;padding:13px;font-size:13px}.hint{font-size:12px;line-height:1.65;color:#a7b1c0}.center{min-height:0;overflow:auto;display:flex;align-items:center;flex-direction:column;padding:14px;background:#11151c}.topNote{font-size:12px;color:#9cb0c3;margin-bottom:13px;text-align:center}#canvasFrame{position:relative;width:min(794px,90%);aspect-ratio:794/1123;box-shadow:0 14px 60px #0009;flex-shrink:0;background:white}#canvasFrame canvas{position:absolute;top:0;left:0;width:100%;height:100%}#handles{touch-action:none;cursor:default}.status{font-size:12px;color:#86d5df;margin:12px 0 22px}.propfield{display:grid;gap:4px;font-size:12px;margin:9px 0}.propfield input,.propfield select,.propfield textarea{width:100%;border:1px solid #435065;background:#272e3d;color:white;padding:8px;border-radius:7px;font:inherit}.propfield input[type=color]{width:100%;height:36px}#layers .layer{width:100%;text-align:left;display:block;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#layers .layer.active{border-color:#36c5d7;background:#1c4853}@media(max-width:1000px){main{grid-template-columns:200px 1fr 220px}header strong{font-size:14px}}@media(max-width:650px){header{height:auto;flex-wrap:wrap}main{height:auto;grid-template-columns:1fr;overflow:visible}aside{max-height:300px}.center{height:650px}}