*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0b0d10;color:#e6e8eb;line-height:1.5}a{color:#7cc4ff}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}pre{border:1px solid #1e2630;border-radius:8px;padding:14px 16px;overflow:auto}code,pre{background:#11161c}code{padding:2px 6px;border-radius:4px}pre code{background:transparent;padding:0}.container{max-width:1100px;margin:0 auto;padding:32px 20px 80px}h1{font-size:28px;margin:0 0 4px}h2{font-size:20px;margin:32px 0 10px}h3{font-size:16px;margin:18px 0 8px}.muted{color:#8b95a1}.tool{display:grid;grid-template-columns:1.4fr 1fr;grid-gap:20px;gap:20px;margin-top:16px}@media (max-width:860px){.tool{grid-template-columns:1fr}}.panel{background:#11161c;border:1px solid #1e2630;border-radius:10px;padding:16px}.dropzone{border:2px dashed #2a3340;border-radius:10px;padding:28px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.dropzone.drag{border-color:#7cc4ff;background:#0f1620}.canvas-wrap{margin-top:14px;background:linear-gradient(45deg,#1a1f26 25%,transparent 0),linear-gradient(-45deg,#1a1f26 25%,transparent 0),linear-gradient(45deg,transparent 75%,#1a1f26 0),linear-gradient(-45deg,transparent 75%,#1a1f26 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border-radius:8px;overflow:auto;max-height:70vh}canvas{display:block;max-width:100%;cursor:crosshair}.btn,button{background:#1a2330;color:#e6e8eb;border:1px solid #2a3340;padding:8px 14px;border-radius:6px;cursor:pointer;font:inherit}button:hover{background:#22304040}button.primary{background:#2563eb;border-color:#2563eb}button.primary:hover{background:#1d4ed8}button:disabled{opacity:.5;cursor:not-allowed}.controls,.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.controls{margin-top:12px}.color-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.color-list li{display:flex;align-items:center;gap:10px;background:#0f151c;border:1px solid #1e2630;border-radius:6px;padding:6px 10px}.swatch{width:22px;height:22px;border-radius:4px;border:1px solid #2a3340}.hex{font-family:ui-monospace,Menlo,monospace;font-size:13px}.remove{margin-left:auto;background:transparent;border:1px solid #2a3340;padding:4px 8px;font-size:12px}input[type=range]{width:180px}input[type=number],input[type=text]{background:#0f151c;color:inherit;padding:6px 8px;font:inherit}.tab,input[type=number],input[type=text]{border:1px solid #2a3340;border-radius:6px}.tab{display:inline-block;padding:6px 12px;cursor:pointer}.tab.active{background:#1a2330}