*,*: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:10px 20px;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:1.1rem}.title-text{font-size:1rem;font-weight:600;letter-spacing:.05em;background:linear-gradient(135deg,#d4b86a,#e88c3a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#fps-counter{font-size:.72rem;color:#ffffff40;font-variant-numeric:tabular-nums}#main{display:flex;flex:1;overflow:hidden}#canvas-wrapper{flex:1;display:grid;place-items:center;padding:20px;overflow:hidden}#game-canvas{image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;max-width:100%;max-height:100%;aspect-ratio:1 / 1;border-radius:3px;box-shadow:0 0 60px #b4641414,0 0 0 1px #ffffff0d}#sidebar{width:172px;padding:12px;display:flex;flex-direction:column;gap:10px;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:12px;padding:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel-label{font-size:.63rem;text-transform:uppercase;letter-spacing:.12em;color:#ffffff47;margin-bottom:10px}#element-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.element-btn{padding:9px 6px;border-radius:8px;border:1.5px solid transparent;background:color-mix(in srgb,var(--el-color) 16%,#10101e);color:#ffffffbf;cursor:pointer;font-size:.74rem;font-weight:500;transition:border-color .12s,background .12s,color .12s;text-align:center;line-height:1}.element-btn:hover{border-color:color-mix(in srgb,var(--el-color) 55%,transparent);background:color-mix(in srgb,var(--el-color) 24%,#10101e);color:#fff}.element-btn.active{border-color:var(--el-color);background:color-mix(in srgb,var(--el-color) 36%,#10101e);color:#fff}.control-row{display:flex;align-items:center;gap:8px}#brush-size{flex:1;accent-color:#c8903a;cursor:pointer;height:4px}#brush-value{font-variant-numeric:tabular-nums;font-size:.78rem;min-width:1.6em;text-align:right;color:#fff6}#clear-btn{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,70,70,.25);background:#ff323212;color:#ff6e6ed9;cursor:pointer;font-size:.78rem;font-weight:500;transition:background .12s,border-color .12s}#clear-btn:hover{background:#ff323229;border-color:#ff464673}#sidebar::-webkit-scrollbar{width:3px}#sidebar::-webkit-scrollbar-track{background:transparent}#sidebar::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}