*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:#080814;color:#c8c8e0;font-family:system-ui,-apple-system,sans-serif;font-size:14px;height:100dvh;overflow:hidden;display:flex;flex-direction:column}#app{display:flex;flex-direction:column;height:100%}#header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}#title{display:flex;align-items:center;gap:8px}.title-icon{font-size:1rem}.title-text{font-size:.95rem;font-weight:600;letter-spacing:.04em;background:linear-gradient(135deg,#d4b86a,#e88c3a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#fps-counter{font-size:.68rem;color:#ffffff38;font-variant-numeric:tabular-nums}#main{display:flex;flex:1;overflow:hidden}#canvas-wrapper{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden;min-width:0}#game-canvas{image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;width:min(100%,calc(100dvh - 70px));height:auto;aspect-ratio:1 / 1;border-radius:3px;box-shadow:0 0 60px #b4641414,0 0 0 1px #ffffff0d}#sidebar{width:158px;padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;border-left:1px solid rgba(255,255,255,.05);flex-shrink:0}.panel{background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px}.panel-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:#ffffff40;margin-bottom:8px}#element-grid{display:flex;flex-direction:column;gap:2px}.group-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.14em;color:#fff3;margin:6px 2px 3px}.group-label:first-child{margin-top:0}.group-row{display:grid;grid-template-columns:1fr 1fr;gap:3px}.element-btn{padding:6px 4px;border-radius:6px;border:1.5px solid transparent;background:color-mix(in srgb,var(--el-color) 14%,#10101e);color:#ffffffad;cursor:pointer;font-size:.67rem;font-weight:500;transition:border-color .1s,background .1s,color .1s;text-align:center;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element-btn:hover{border-color:color-mix(in srgb,var(--el-color) 50%,transparent);background:color-mix(in srgb,var(--el-color) 22%,#10101e);color:#fff}.element-btn.active{border-color:var(--el-color);background:color-mix(in srgb,var(--el-color) 34%,#10101e);color:#fff}.control-row{display:flex;align-items:center;gap:6px}#brush-size{flex:1;accent-color:#c8903a;cursor:pointer;height:4px}#brush-value{font-variant-numeric:tabular-nums;font-size:.74rem;min-width:1.4em;text-align:right;color:#ffffff61}#clear-btn{width:100%;padding:7px;border-radius:7px;border:1px solid rgba(255,70,70,.22);background:#ff32320f;color:#ff6e6ecc;cursor:pointer;font-size:.74rem;font-weight:500;transition:background .12s,border-color .12s}#clear-btn:hover{background:#ff323226;border-color:#ff46466b}#sidebar::-webkit-scrollbar{width:3px}#sidebar::-webkit-scrollbar-track{background:transparent}#sidebar::-webkit-scrollbar-thumb{background:#ffffff12;border-radius:2px}