:root { color-scheme: dark; font-family: Inter, ui-rounded, "Segoe UI", sans-serif; background: #0d0c17; color: #f7f5ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: 24px; background: radial-gradient(circle at 15% 10%, #403074 0, transparent 35%), #0d0c17; }
header { width: min(1200px, 100%); margin: 0 auto 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
h1 { margin: 3px 0 0; font-size: clamp(1.8rem, 5vw, 3.2rem); }
h2 { margin: 0 0 8px; font-size: 1rem; }
.eyebrow { margin: 0; color: #89f0db; font-size: .7rem; font-weight: 850; letter-spacing: .18em; }
a { color: #89f0db; font-weight: 800; }
main { width: min(1200px, 100%); margin: auto; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; align-items: start; }
.controls, .canvas-panel { border: 1px solid #ffffff20; border-radius: 18px; background: #17152be8; box-shadow: 0 18px 60px #0006; }
.controls { padding: 18px; display: grid; gap: 12px; }
label, legend { color: #cbc6da; font-size: .78rem; font-weight: 800; }
input, select, button { width: 100%; min-height: 44px; border: 1px solid #ffffff25; border-radius: 9px; font: inherit; }
input, select { margin-top: 5px; padding: 0 10px; background: #090815; color: white; }
button { cursor: pointer; padding: 8px 10px; border: 0; background: #89f0db; color: #10241f; font-weight: 850; }
button.secondary { border: 1px solid #89f0db66; background: transparent; color: #89f0db; }
button.danger { background: #9e3434; color: white; }
.hidden { display: none !important; }
.two-column, .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
fieldset { margin: 0; padding: 10px; border: 1px solid #ffffff20; border-radius: 10px; }
.tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.tool { min-height: 54px; padding: 4px; color: white; border: 2px solid transparent; }
.tool.selected { border-color: #fff; box-shadow: 0 0 0 2px #89f0db; }
.tool strong, .tool small { display: block; }
.tool small { font-size: .55rem; }
.help, #status, #delete-help { margin: 0; color: #aaa5be; font-size: .72rem; line-height: 1.4; }
#status { min-height: 1.1em; color: #89f0db; font-weight: 750; }
.library { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #ffffff18; }
#saved-levels { min-height: 130px; padding: 4px; }
.canvas-panel { min-width: 0; padding: 12px; display: grid; place-items: center; overflow: auto; }
#level-canvas { width: min(100%, calc(100vh - 110px)); height: auto; aspect-ratio: 1; image-rendering: pixelated; background: #080812; touch-action: none; cursor: crosshair; }
.version { position: fixed; right: 8px; bottom: 8px; padding: 5px 8px; border: 1px solid #89f0db4d; border-radius: 99px; background: #090815e8; color: #89f0db; font-size: .6rem; font-weight: 850; }
@media (max-width: 760px) { body { padding: 12px; } header { align-items: start; } main { grid-template-columns: 1fr; } .canvas-panel { grid-row: 1; padding: 6px; } #level-canvas { width: 100%; } .controls { grid-row: 2; } }