*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0f172a;overscroll-behavior:none}.app{display:flex;flex-direction:column;height:100%}header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px;background:#111827;color:#e5e7eb;border-bottom:1px solid #1f2937}.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.2px}.brand .dot{width:10px;height:10px;border-radius:50%;background:#6366f1;box-shadow:0 0 12px #6366f1}.backend{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:#312e81;color:#c7d2fe;letter-spacing:.3px}.rtt{font-size:12px;font-weight:600;color:#34d399;font-variant-numeric:tabular-nums}.rtt.off{color:#6b7280}.toggle{padding:6px 12px;border-radius:6px;background:#1f2937;color:#e5e7eb;border:1px solid #374151;cursor:pointer;font-weight:600}.toggle.on{background:#6366f1;border-color:#6366f1;color:#fff}.tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.swatches,.widths{display:flex;gap:6px}.swatch{width:24px;height:24px;border-radius:6px;border:2px solid transparent;cursor:pointer}.swatch.active{border-color:#e5e7eb;transform:scale(1.08)}.width{width:30px;height:30px;border-radius:6px;background:#1f2937;border:1px solid #374151;display:grid;place-items:center;cursor:pointer}.width.active{border-color:#6366f1}.width span{background:#e5e7eb;border-radius:50%;display:block}.clear{padding:6px 12px;border-radius:6px;background:#dc2626;color:#fff;border:none;cursor:pointer;font-weight:600}.clear:hover{background:#b91c1c}.meta{margin-left:auto;font-size:13px;color:#9ca3af;font-variant-numeric:tabular-nums}.canvas{flex:1;width:100%;touch-action:none;display:block;cursor:crosshair}footer{padding:8px 16px;background:#111827;color:#6b7280;font-size:12px;text-align:center;border-top:1px solid #1f2937}