*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#eee;background:#111;font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.app{flex-direction:column;height:100%;display:flex}.toolbar{border-bottom:1px solid #2a2a2a;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 20px;display:flex}.toolbar h1{margin:0;font-size:16px}.toolbar .hint{color:#888;flex:1}.btn{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:7px 14px}.btn.primary{color:#111;background:#fff;font-weight:600}.btn.ghost{background:color-mix(in srgb, var(--fg) 15%, transparent);color:var(--fg)}.columns{flex:1;min-height:0;display:flex;overflow-x:auto}.column{max-width:420px;color:var(--fg);background:linear-gradient(var(--bg), var(--bg)), repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 20px 20px;background-attachment:local;flex:1 0 300px;position:relative;overflow-y:auto}.column-body{flex-direction:column;gap:10px;padding:20px;display:flex;position:relative}.column-actions{align-items:center;gap:6px;display:flex}.big-hex{text-transform:uppercase;flex:1;font:600 22px/1 ui-monospace,SF Mono,Menlo,monospace}.icon-btn{font:inherit;cursor:pointer;background:color-mix(in srgb, var(--fg) 12%, transparent);width:30px;height:30px;color:var(--fg);border:0;border-radius:6px;flex:none}.icon-btn:hover{background:color-mix(in srgb, var(--fg) 25%, transparent)}.picker-row{align-items:center;gap:8px;display:flex}.native-picker{border:2px solid color-mix(in srgb, var(--fg) 40%, transparent);cursor:pointer;border-radius:10px;flex:1;height:44px;overflow:hidden}.native-picker input{cursor:pointer;background:0 0;border:0;width:100%;height:100%;padding:0;transform:scale(1.5)}.alpha{align-items:center;gap:10px;font-size:12px;font-weight:600;display:flex}.alpha input{accent-color:var(--fg);flex:1}.alpha-value{text-align:right;width:38px;font-family:ui-monospace,Menlo,monospace}.field-label{letter-spacing:.04em;text-transform:uppercase;opacity:.85;justify-content:space-between;margin-bottom:3px;font-size:11px;font-weight:600;display:flex}.field-label em{text-transform:none;letter-spacing:0;font-style:normal}.field-row{gap:6px;display:flex}.field input{background:color-mix(in srgb, var(--fg) 12%, transparent);min-width:0;color:var(--fg);border:1.5px solid #0000;border-radius:6px;outline:none;flex:1;padding:7px 10px;font:13px ui-monospace,SF Mono,Menlo,monospace}.field input::placeholder{color:color-mix(in srgb, var(--fg) 45%, transparent)}.field input:focus{border-color:color-mix(in srgb, var(--fg) 60%, transparent)}.field.invalid input{border-color:#e5484d}.field.clipped input{border-color:#f5a524}.add-column{color:#777;cursor:pointer;background:#161616;border:0;border-left:1px solid #2a2a2a;flex:0 0 72px;font-size:32px}.add-column:hover{color:#fff;background:#1d1d1d}@media (width<=640px){.columns{flex-direction:column;overflow:hidden auto}.column{flex:none;max-width:none;overflow:visible}.add-column{border-left:0;flex:0 0 64px}}